Question

我第一次使用bootstrap来处理我的项目。从我可以告诉容器＆gt;行工作正常，这问题是容器＆gt;行＆gt; span12需要，还是只是最好的做法？

谢谢

Answer 1

问题很混乱。

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

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

来自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 documentation。向下滚动到Fluid Nesting。

另外请记住，在跨度内创建新容器时，计数从'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”处开始跨度计数。

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

的Gr。乐华

容器中的行是否需要span12？引导

2 个答案: