Полноразмерные панели в Bootstap V2 «в штучной упаковке» (1170px) макет

Question

Я изучаю будущий проект, и я хочу его построить с помощью бутстрапа. Я хочу, чтобы он был в коробке (нежидкостной) макет, ограниченный 1170px ... [на самом деле на стороне записки, которую я сейчас работаю с bootstrap V2, потому что я еще не смотрел должным образом на V3, но в конечном итоге я разработаю то же или подобное в V3].

Так что мне нужно иметь панели с полной шириной (в последнее время они довольно популярны в «плоском дизайне») с ограниченным контентом. То есть ... весь контент будет ограничен максимальной шириной 1170 пикселей, но фон будет охватывать всю ширину браузера.

Итак, я знаю, что эта разметка работает, но а) нормально ли иметь вложенные «контейнерные» divs, как я сделал, и б) я не видел эту технику раньше ... есть ли лучший способ (более стандартный путь), что я мог бы быть не хватает ... и я понимаю, что это может быть лучше начать с 3-й версии, но я предпочел бы работать это в первую V2 для моих старых проектов, если ничего другого

<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

Я нашел на премиум-рынке начальной загрузки и проанализировал некоторые темы. Похоже, что что-то в этом направлении является лучшей моделью.

<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.