html - Bootstrap V2 "boxed"(1170px) 布局中的全宽面板

Question

我正在研究一个 future 的元素，我想用 bootstrap 来构建它。我希望它是一个限制为 1170px 的盒装(非流体)布局...... [实际上在旁注中我目前正在使用 bootstrap V2 因为我还没有正确查看 V3 但最终我会解决V3 中出现相同或相似的东西]。

所以我需要的是具有受限内容的全宽面板(这些面板最近在“平面设计”中非常流行)。也就是说......所有内容的最大宽度都将限制为 1170 像素，但背景将跨越浏览器的整个宽度。

所以我知道这个标记有效，但是 a) 是否可以像我所做的那样嵌套“容器”div 并且 b) 我以前没有见过这种技术......有没有更好的方法(更标准的方法) ) 我可能会遗漏……我很欣赏从版本 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

我找到了一个优质的 bootstrap 市场并分析了其中的一些主题。看起来沿着这些思路的东西是更好的模型。

<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 元素可能会更好。