부트 스트랩 V2 "박스형"(1170px) 레이아웃의 전폭 패널

Question

향후 프로젝트를 조사 중이며 부트 스트랩으로 빌드하려고합니다. 1170px로 제한된 박스형 (비 유동적) 레이아웃이되고 싶습니다 ... [실제로 사이드 노트에 나는 현재 V3에서 제대로 보지 못했기 때문에 현재 부트 스트랩 V2로 작업하고 있지만 결국에는 동일하거나 유사한 V3 밖으로].

그래서 내가 필요로하는 것은 제한된 내용이 포함 된 전체 너비 패널 (요즘은 "플랫 디자인"에서 인기가 있습니다)입니다. 즉 ... 모든 콘텐츠는 최대 너비가 1170px로 제한되지만 배경은 브라우저의 전체 너비에 걸쳐 있습니다.

그래서이 마크 업이 작동한다는 것을 알았지 만) "컨테이너"div가 중첩되어 있고 b) 전에이 기술을 보지 못했습니다 ... 더 좋은 방법이 있습니다 방법)이 나는 ... 누락 될 수 있습니다와 나는 버전 3으로 시작하는 것이 더있을 수 있음을 인식하지만

<div class="container-fluid" > 

    <div class="container" > 
     <div class="row"> 
      <div class="span12"><h2>Boxed" Bar (limited to 1170px)</h2></div> 
     </div> 
    </div> 

    <div class="row" style="background:#666"> 
     <div class="span12"><h2>Full Width Bar with no limits to content</h2></div> 
    </div> 

    <div class="row" style="background:yellow"> 
     <div class="container" > 
      <div class="row"> 
       <div class="span12"><h2>Full Width Bar with content limited to 1170px</h2></div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

다른 아무것도 내가 찾은 경우 차라리 예전 프로젝트를 처음 V2에서이 문제를 해결할 것 프리미엄 부트 스트랩 마켓 플레이스를 구축하고 거기에있는 테마 중 일부를 분석했습니다. 이 선을 따라 뭔가 더 좋은 모델 인 것 같습니다.

<div class="my-own-wrapper" > <!-- eg 100% width to wrap entire site --> 

    <div class="container" > 
     <div class="row"> 
      <div class="span12"><h2>Boxed" Bar (limited to 1170px)</h2></div> 
     </div> 
    </div> 

    <div class="whatever" style="background:#666"> <!-- non bootrap div 100% width --> 
     <div><h2>Full Width Bar with no limits to content</h2></div> 
    </div> 

    <div class="whatever" style="background:yellow"> 
     <div class="container" > <!-- wrapping bootstrap scaffolding in display div --> 
      <div class="row"> 
       <div class="span12"><h2>Full Width Bar with content limited to 1170px</h2></div> 
      </div> 
     </div> 
    </div> 
</div> 

분명히 html5 요소를 사용하는 것이 좋습니다.