html - 容器中的一行是否需要 span12？引导程序

Question

我第一次使用引导程序来处理我的项目。据我所知， container>row 工作正常，这引出了问题是 container>row>span12 需要，还是只是最佳实践？

谢谢

Answer 1

这个问题令人困惑。

Bootstrap 使用浮动网格系统工作。查看下面的源代码应该可以弄清楚发生了什么。该类.container设置宽度为 940 像素，.span12该类也是如此。该类.row是一个带有 clearfix 的 div 以包含一行浮动.span列。所有.spanXX类都向左浮动并留有 20px 的左边距来创建网格。

如果您使用的只是一个容器和一行，那么您只是在创建一个 940 像素宽的容器，左边距为 -20 像素。您仍然应该使用.span12与框架保持一致并正确设置边距。这就提出了一个问题，如果您不想利用列，为什么要首先使用网格布局。如果您想要的只是一个 940 像素的容器，那么只需创建一个。

来自 bootstrap.css：

.row {
  margin-left: -20px;
  *zoom: 1;
}

.row:before,
.row:after {
  display: table;
  line-height: 0;
  content: "";
}

.row:after {
  clear: both;
}

[class*="span"] {
  float: left;
  margin-left: 20px;
}

.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
  width: 940px;
}

.span12 {
  width: 940px;
}

Answer 2

看看文档，如果我理解你的问题是正确的，答案就在这个链接Bootstrap 文档中。向下滚动一点到流体嵌套。

还要记住，当在一个跨度内创建一个新容器时，计数从“0”开始，所以

<div class="row-fluid">
  <div class="span12">
    Fluid 12
    <div class="row-fluid">
      <div class="span6">
        Fluid 6
        <div class="row-fluid">
          <div class="span6">Fluid 6</div>
          <div class="span6">Fluid 6</div>
        </div>
      </div>
      <div class="span6">Fluid 6</div>
    </div>
  </div>
</div>

在此示例代码中，您可以看到有一个跨度 12，它是主 div。在这个跨度中有 2 个 6 个跨度！这是有道理的，在 6 的跨度中也有 2 个 6 的跨度，这也是有道理的，因为每次创建新的行流体类时，跨度计数都从“0”开始。

我希望我正确理解了你的问题！

格。乐华