twitter-bootstrap - 为什么 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-*orhidden-*类来确保一致的行高。

参考：Boostrap 3 Grid 系统

Answer 2

除了@firtive 的评论，嵌套列的代码对于默认响应（非流体）网格或流体网格是不同的。

使用默认网格，使用class="row"并且在您的情况下嵌套列的数量确实应该总计 9（其父级的列数）。这是因为列具有固定的宽度。

对于流体网格，使用class="row-fluid"并且嵌套列的数量应加起来为 12。这是因为列宽会根据其父级宽度的百分比而变化。

源引导文档

请参阅下面的示例。

希望这可以帮助

默认的非流体示例， 请现场观看

<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 -->

Answer 3

您需要考虑分数：span1并不意味着一列，它意味着 1/12 列，而span12意味着 12/12 列。Span12表示包含元素中的单个列，如果需要可以细分 12 次。

因此，如果您想要两列，则将两个 div 与<div class="span6">.