부트 스트랩 3 유체가 포함 된 유체 용기

Question

이것은 단순한 것일 수도 있지만 아직 이해하지 못했습니다.

전체 화면 유체 컨테이너를 만들고 비 유체 컨테이너에서와 같이 탐색을 포함한 내용을 페이지 중앙에 배치하는 방법은 무엇입니까?

고정 된 너비로 내용을 유지하면서 페이지를 가로 지르는 최상위 nav/header 배경을 얻으려고합니다.

Answer 1

내비게이션 컨텐츠로 .container을 둘러싸고 배경색을 추가하는 <div>으로 둘러 쌀 수 있습니다. 다음 예를 참조하십시오

.background { 
 
    background-color: #f99; 
 
} 
 

 
.content { 
 
    background-color: #9f9; 
 
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="background"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-12 content">Content</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

거친 방법은 부트 스트랩 그리드 개념을 사용하는 것입니다. 부트 스트랩은 행을 12 개의 열로 나눕니다. 트릭은 4- 공백 블록 앞뒤에 4- 검은 공백 블록을 삽입하는 것으로 구성됩니다. 예 : 답변에 대한

<div class="container-fluid"> 
 
\t <div class="row"> 
 
     
 
\t \t <div class="col-sm-4"></div> 
 
     
 
\t \t <div class="col-sm-4"> 
 
\t \t \t <h2>Title</h2> 
 
\t \t \t <p>Your content here</p> 
 
\t \t </div> 
 
     
 
\t \t <div class="col-sm-4"></div> 
 
\t </div> 
 
</div>