Bootstrap V2“盒装”（1170px）布局中的全宽面板答案

【问题标题】：Full width Panels in Bootstrap V2 "boxed" (1170px) layoutBootstrap V2“盒装”（1170px）布局中的全宽面板
【发布时间】：2019-06-29 01:30:10
【问题描述】：

我正在研究一个未来的项目，我想用 bootstrap 构建它。我希望它是一个限制为 1170 像素的盒装（非流体）布局...... [实际上，我目前正在使用引导程序 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>

【问题讨论】：

标签： html css twitter-bootstrap layout

【解决方案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 元素可能会更好。

【讨论】：