为什么Twitter Bootstrap让我拥有超过12列？

Question

我有一个容器,里面有2个div:span9和span3.在我的span9div中,我希望仅限于9列.但是,除非我将div设置span9为a span12,否则会留下3个额外的空白列!

为什么这会发生？对我来说,"span9"应该意味着我有9列可用.我没有看到任何我正在使用的内容,这会导致允许内容重置为网格中的12列.没有任何意义.

Answer 1

请注意,这不适用于Bootstrap 3,因为您可以混合和匹配列类,因此类名中的数字不必加起来为12.例如,这里是"混合:移动和桌面"的代码" 示例网格页面上的示例:

<div class="row">
  <div class="col-xs-12 col-sm-6 col-lg-8">...</div>
  <div class="col-xs-6 col-lg-4">...</div>
</div>

正如您所看到的,尝试将列添加到等于12的概念对于Bootstrap 3甚至没有意义.如果您查看bootstrap.css,那么您将看到列类只是相对于容器div的百分比,例如:

.col-sm-6 {
  width: 50%;
}

在这种情况下,如果容器的宽度是1170px,那么每个col-sm-6div的宽度将等于1170px的50%(为了简单起见,我们忽略行的-15px侧边距),无论该行中有多少列.如果容器内的列数多于可容纳的列,则列将自动换行.如果您的某些列超高,那么您可能希望使用<div class="clearfix"></div>这些visible-*或hidden-*类的组合来确保一致的行高.

参考:Boostrap 3网格系统

Answer 2

除了@firtive的评论之外,嵌套列的代码对于默认的响应(非流体)网格或流体网格是不同的.

使用默认网格,使用class ="row",并且您的案例中嵌套列的数量确实应该为9(其父级的列数).这是因为列具有固定的宽度.

使用流体网格时,请使用class ="row-fluid",嵌套列的数量应最多为12.这是因为列宽根据其父级宽度的百分比而变化.

源Bootstrap文档

见下面的例子.

希望这可以帮助

默认非流动示例 请参见此实时

<div class="row">

 <div class="span9">

  <div class="row"> <!-- start nested row -->  

    <div class="span6">nested col</div>
    <div class="span3">nested col</div>  

  </div>           <!-- end nested row -->

</div> <!-- end span 9 parent  -->

<div class="span3">
span 3
</div>

</div> <!-- end row -->

流体网格示例 现场直播

<div class="row-fluid">

  <div class="span9">

    <div class="row-fluid"> <!-- start nested fluid row -->  

      <div class="span6">nested col</div>
      <div class="span6">nested col</div>  

    </div>                 <!-- end nested fluid row -->

  </div> <!-- end span 9 parent -->

  <div class="span3">span 3</div>
</div> <!-- end row -->