为什么Span跨入Bootstrap

Question

我试图使用bootstrap制作一个网站。当我尝试在主内容区域[Span5，Span5和Sidebar Span2]中添加一些跨度时，边栏突破并进入下一行 我附加了CSS和浏览器预览。

这将是很好，如果有人帮我在这方面

CSS代码：

<div class="container"> 

    <div class="content-box"> 

    <div class="row"> 
    <div class="span12"> 
     <div class="span5"> 
     Column1 
     </div> 
     <div class="span5"> 
     Column2 
     </div> 
     <div class="span2"> 
     Sidebar 
     </div> 

    </div> 
    </div><!-- End of "Row" --> 

</div><!-- End of "Content Box" --> 

</div><!-- End of "Container" --> 

非常感谢

Teekeybee

Answer 1

随着Bootstrap2，你需要一个row类来包装你的嵌套span S：

<div class="container"> 
    <div class="content-box"> 
     <div class="row"> 
      <div class="span12"> 
       <div class="row"><!-- row for nested spans --> 
        <div class="span5">Column1</div> 
        <div class="span5">Column2</div> 
        <div class="span2">Sidebar</div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

在你的情况，我觉得你span12是没用的，所以我建议：

<div class="container"> 
    <div class="content-box"> 
     <div class="row"> 
      <div class="span5">Column1</div> 
      <div class="span5">Column2</div> 
      <div class="span2">Sidebar</div> 
     </div> 
    </div> 
</div> 

取看看文档（“嵌套列”部分）：http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem

希望这有助于！

Answer 2

如果您使用引导3 +，那么span1，span2不再有效。请仔细阅读他们的文档：http://getbootstrap.com/css/#grid-options

我不熟悉w/bootstrap 2.3，但这是为了防止您使用版本3+。