Question

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

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

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

Answer 1

.row中的.container类不是必需的，但是当你开始想要多行时，最好还是包含它。< / p>

.row真正做的就是确保其中的所有div都显示在自己的行上，与前一行和后一行.rows分开。

对于.container div内的.navbar，这是使导航栏与页面其余部分对齐所需的单独内容。如果你在渲染的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行。

Answer 2

答案比给出的答案简单得多。不，.container不必包含任何特定代码，并且对包含它的内容没有任何障碍......

.container所做的是作为“包装”来“包含”包含在其中的任何和所有元素的大小。 .container可以包装页面或组件。因此，如果您想要一个类似于Twitter Bootstrap文档的页面，两边都有“固定”宽度和相等的边距，那么只需要一个.container来包装页面上的所有内容。

.container还有其他用途;您是否注意到Bootstrap文档（.navbar-fixed-top）中的顶部导航栏如何跨越屏幕的整个宽度，但导航栏内的导航项目是否“包含”到内容的宽度？这是因为.navbar-fixed-top不在.container内，而在.nav内。{/ p>

Answer 3

引导网格由12列组成，只要它们相加到12就可以在一行中以任意组合进行调整。您可以将它们视为包含行，例如表行等，这意味着分隔不同的内容行。在网格内，.row容器有一个单独的任务，并且（并且需要）重新调整最后一个网格列的装订线宽度，这取决于屏幕大小（如果包含响应表）。如果你查看.row类后面的css，你会注意到默认情况下它的属性为margin-left:-30px（根据屏幕大小，它可能会更大或更小），这是一个属性，意思是从行的最后一列“移除”排水沟;没有它，网格不会重新调整排水沟，它会突破第二条线。

现在，.row容器是.container容器的子容的原因是因为.row容器仅用于分隔内容的“行”，而不是包含部分以及页面中心内容的更多内容。因此，导航示例没有一个的原因可能是由于导航元素缺少沟槽宽度，因为它本来是一个完整的块元素而不是网格，所以没有必要重置最后松散的排水沟。

必须Bootstrap容器元素包含行元素？

3 个答案:

完整示例

简而言之