트위터 부트가있는 전체 너비 레이아웃

ProgramingTip

트위터 부트가있는 전체 너비 레이아웃

bestdevel 2020. 11. 6. 19:02

트위터 부트가있는 전체 너비 레이아웃

다음과 장식 레이아웃을 수행합니다. http://dribbble.com/shots/829195-Slate/attachments/86422

내 프로젝트는 반응 형 디자인의 Twitter Bootstrap을 사용합니다. 부트 스트랩으로 전체 너비 레이아웃을 구현할 수 있습니까?

문제는 내가 읽은 유동적 레이아웃이 부트 유효성 3.0에서 제거되고 반응 형 디자인의 너비가 고정 것입니다.

받아 들여진 대답은 BS3와 같은 행성에 있지 않기 때문에 거의 전폭 기능을 달성하기 위해 내가 사용하고있는 것을 공유 할 것입니다.

우선, 이것은 속임수입니다. 실제로 유동적 인 가로는 사이트를 보는 화면의 크기에 따라 달라집니다.

BS3 및 유동 너비 사이트의 문제는 "모바일 우선"접근 방식을 취했다는 것입니다.이 방식을 사용하는 데스크톱 (1200px)으로 모든 화면 너비를 정의해야합니다. 저는 1900px 노트북에서 작업하고 있습니다. 와이드 스크린 -BS3의 크기의 너비라고 생각하는 내용의 양쪽에 350px로 끝납니다.

10 개의 화면 너비를 정의했습니다 (실제로는 5 개이지만 어쨌든). 나는 일반적인 것이 일반적인 너비이기 때문에 그것이 편하지 않다. 그래서 컨테이너 클래스의 너비를 정의 할 때 BS가 선택할 추가 너비를 정의했습니다.

BS를 사용하는 방법은 부트 기본에서 제공되는 한 적은 파일을 가져오고, variables.less 파일은 내 자신을 추가하여 변경하려는 항목을 재정의하는 것입니다. 약간의 파일 내에서 다음을 추가하여 두 가지 일반적인 화면 너비 설정을 얻습니다.

@media screen and (min-width: 1600px) {
    .container {
        max-width: (1600px - @grid-gutter-width);
    }
}
@media screen and (min-width: 1900px) {
    .container {
        max-width: (1900px - @grid-gutter-width);
    }
}

이 두 설정은 서로 다른 화면을 사용하는 예를 수행해야하는 작업에 있습니다. 여기에서 1600px 및 1900px에서 전체 너비를 얻습니다. 1600-BS는 1200px 너비로 돌아간 다음 768px 등으로 내려갑니다.

지원할 용량이 더 큰 경우 다음과 같이 더 많은 @media screen 문을 만듭니다. 대신 CSS를 빌드하는 경우 사용 된 거터 너비를 결정하고 대상 화면 너비에서 빼는 것이 좋습니다.

원래 답변 :

부트 유효성 2 문서에서 :

.row를 .row-fluid로 변경하여 모든 행을 "유동"으로 만듭니다. 기둥 클래스는 정확히 동일하게 유지하고 고정 그리드와 유동 그리드 사이를 쉽게 전환 할 수 있습니다.

암호

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

이를 통해 컨테이너의 너비를 유동적 인 값으로 설정하면 원하는 레이아웃을 얻을 수 있습니다.

최신 부트 유효성 (3.1.x)에서 유동적 인 레이아웃을 달성하는 방법은 .container-fluid클래스 를 사용 합니다.

참조는 부팅 그리드 를 참조하십시오.

*{
   margin:0
   padding:0
}

컨테이너의 너비를 확인하십시오 : % 100

Bootstrap 3에서 열은 백분율을 사용하여 지정합니다. (부트 필요 2에서는 열 / 스텁 필요 .row-fluid요소가 있는 경우 에만 사용 팬이 더 이상 존재하지 않습니다.)를 사용하면 .container@Michael이 절대적으로 옳습니다. 고정 너비 레이아웃으로. 그러나 .container 요소를 사용하지 않는 좋은 상태입니다.

<body>
  <div class="row">
    <div class="col-lg-4">...</div>
    <div class="col-lg-8">...</div>
  </div>
</body>

몸통의 여백은 이미 0이므로 가장자리까지 바로 올라갈 수 있어야합니다. (열에는 여전히 양쪽에 15px 패딩이 있으므로 디자인에서이를 고려해야 할 수도 있지만 이것이 중단되지는 않으며 Bootstrap을 다운로드 할 때 언제든지 사용자 정의 할 수 있습니다.)

다른 클래스를 만들고 부트 스트랩 container클래스 와 함께 추가하십시오 . container-fluid그래도 사용할 수 있습니다 .

<div class="container full-width">
    <div class="row">
        ....
    </div>
</div>

CSS 부분은 매우 간단합니다.

* {
    margin: 0;
    padding: 0;
}
.full-width {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
}

도움이 되었기를 바랍니다. 감사합니다!

다음은 Bootstrap 3을 사용한 100 % 너비, 100 % 높이 레이아웃의 예입니다.

http://bootply.com/tofficer/77686

BS3를 사용하는 가장 쉬운 방법은 BS3 CSS에서 설정 한 최대 너비와 패딩을 이와 같이 간단히 재설정하는 것입니다. 다시 컨테이너 유체를 얻습니다.

.container{
  max-width:100%;
  padding:0;
}

왼쪽 및 오른쪽 패딩과 100 % 너비가 필요한 클래스 "col-md-12"를 사용할 수 있다고 생각합니다. 이것이 두 번째 부트 스트랩의 컨테이너 유체를 대체하는 좋은 것으로 보입니다.

참고 URL : https://stackoverflow.com/questions/14263307/full-width-layout-with-twitter-bootstrap

'ProgramingTip' 카테고리의 다른 글

Content-Range와 Range 헤더의 차이점은 무엇입니까? (0)	2020.11.06
.NET MVC-Html.LabelFor에 클래스를 할당하는 방법은 무엇입니까? (0)	2020.11.06
개행 또는 \ r \ n을 (0)	2020.11.06
onTouchEvent ()에서 이동과 클릭을 구별하는 방법은 무엇입니까? (0)	2020.11.06
std :: string에 int 추가 (0)	2020.11.06

현재글트위터 부트가있는 전체 너비 레이아웃

bestdevel

트위터 부트가있는 전체 너비 레이아웃

트위터 부트가있는 전체 너비 레이아웃

최신 정보 :

최신 정보 :

원래 답변 :

'ProgramingTip' 카테고리의 다른 글

'ProgramingTip'의 다른글

티스토리툴바

트위터 부트가있는 전체 너비 레이아웃

트위터 부트가있는 전체 너비 레이아웃

최신 정보 :

최신 정보 :

원래 답변 :

'ProgramingTip' 카테고리의 다른 글

'ProgramingTip'의 다른글

관련글

티스토리툴바