53

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

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

谁能详细说明框架应该如何工作？我是新手。

4

3 回答 3

49

在 a.row中不需要该类.container，但是当您开始时将其包含在内是一个好主意，以防您以后想要多行。

.row真正要做的就是确保其中的所有 div 都出现在自己的行上，与上一个和下一个分开.rows。

对于 div 的.container内部.navbar，这是使导航栏与页面的其余部分对齐所必需的单独的东西。如果您在呈现的 HTML 中进一步向下看，您会发现还有一个.container不在任何.navbardiv 中的，它是包含所有主要内容的那个。

一个完整的例子

<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 行，不管上面的行是否已满。

于 2012-10-21T01:23:49.443 回答
30

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

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

还有其他用途.container；您是否注意到 Bootstrap 的文档.navbar-fixed-top( 这是因为.navbar-fixed-topa 不在 a内部，.container而.nav在它内部。

于 2012-10-22T01:56:18.203 回答
1

引导网格由 12 列组成，只要它们加起来为 12，就可以在一行内以任意组合进行调整。您可以将它们视为包含行，例如表格行之类，用于分隔不同的行的内容。在网格内，.row容器有一个单独的任务，并且在那里（并且需要）重新调整最后一个网格列的间距宽度，这取决于屏幕尺寸（如果包含响应表）。如果您查看.row该类背后的 css，您会注意到margin-left:-30px默认情况下它具有一个属性（根据屏幕大小，它可以更大或更小），该属性旨在“删除”最后一列中的排水沟在行中；没有它，网格将不会重新调整排水沟，它会中断到第二条线上。

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

于 2012-10-21T02:04:19.313 回答