Question

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

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

Answer 1

请注意，这不适用于Bootstrap 3，因为您可以混合和匹配列类，因此类名中的数字不必加起来为12.例如，这里是“Mixed：”的代码：移动和桌面“示例在sample grid page上：

<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-6 div的宽度将等于1170px的50％（为了简单起见，让我们忽略行的-15px边缘），无论列数是多少在那一排。如果容器内的列数多于可容纳的列，则列将自动换行。如果您的某些列超高，那么您可以将<div class="clearfix"></div>与visible-*或hidden-*类结合使用，以确保一致的行高。

参考：Boostrap 3 Grid system

Answer 2

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

使用默认网格，使用 class =“row”，您的案例中嵌套列的数量确实应为9（其父级的列数）。这是因为列具有固定的宽度。

使用流体网格时，使用 class =“row-fluid”，嵌套列的数量最多应为12.这是因为列宽根据宽度的百分比而变化他们的父母。

来源Bootstrap Docs

见下面的例子。

希望这有帮助

默认非流动示例 see this live

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

流体网格示例 see this live

<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 class="span6">放置两个div。

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

3 个答案: