Question

我正在研究未来的项目，我想用bootstrap构建它。我希望它是一个盒装（非流畅）布局，限制为1170px ... [实际上在旁注上我正在使用bootstrap V2，因为我还没有正确看V3但最终我会解决相同或类似的事情在V3]。

所以我需要的是拥有全宽度的面板（这些在最近很流行的“平面设计”中）具有受限的内容。那就是......所有内容都限制在1170px的最大宽度，但背景将跨越浏览器的整个宽度。

所以我知道这个标记有效，但是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元素可能会更好。

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

1 个答案: