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

Question

从我对文档的阅读中,似乎.container是.row包含.spanX(和x总数为12)的div 的"父"包装器.但是,.row它们的导航示例似乎并不存在.

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

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

Answer 1

该.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行.

Answer 2

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

什么.container是作为"包装"来"包含"包含在其中的任何和所有元素的大小.并且.container可以包装页面或组件.所以,如果你想有一个页面类似于Twitter的引导的文档,对双方"固定的"宽度和平等的保证金,那么只有一个.container是必要的包装所有页面上的内容.

还有其他用途.container; 你有没有注意到,在引导的文档的顶部导航栏中,(如何.navbar-fixed-top)横跨屏幕的整个宽度,但导航栏里面的导航项目"载"的内容的宽度？这是因为.navbar-fixed-top它不是在里面.container而是在.nav里面.