css - Bootstrap 容器元素必须包含行元素吗？

Question

根据我对文档的阅读，.container 似乎是 .row 和包含 .spanX 的 div 的“父”包装器 (其中 x 总计为 12)。但是，在他们的导航示例中似乎没有 .row。

此外，在他们的文档站点上，.container 由几个与导航栏相关的 div 包裹。

任何人都可以详细说明框架应该如何工作吗？我是新手。

Answer 1

.row 类在 .container 中不是必需的，但无论如何在开始时包含它是个好主意，以防万一您稍后需要多行。

.row 真正做的就是确保它里面的所有 div 都出现在他们自己的行上，与前面和后面的 .rows 分开。

对于 .navbar div 内的 .container，这是使导航栏与页面其余部分对齐所必需的独立内容。如果您进一步查看呈现的 HTML，您会看到还有另一个 .container 不在任何 .navbar div 中，而这就是所有内容的主要内容。

一个完整的例子

<div class="container">
  <div class="row">
    <!-- These divs are inline and do NOT fill up the full 12 columns -->
    <div class="span4">...</div>
    <div class="span4">...</div>
  </div>

  <!-- This is a automatically a new line of divs -->
  <div class="row">
    <!-- This div will appear below the previous row, even though it
      would fit next to the other divs -->
    <div class="span4"></div>
  </div>

  <!-- These will appear in their own row, but may act
    unexpectedly in certain situations -->
  <div class="span4"></div>
  <div class="span4"></div>
</div>

简而言之

.row 定义一行 div，顾名思义。每一个表示新的一行div，不管上面的行是否已满。