什么时候应该在Twitter Bootstrap 3中使用容器和行？

Question 1

请向我解释什么时候使用类container和row。我不确定，因为Bootstrap的文档对此部分还不清楚。

我正在使用Bootstrap 3。

Question 2

container 是一个容器 row元素。

row 元素是列的容器（文档称其为网格系统）

此外，container设置内容的边距以处理布局的响应行为。

因此，container该类通常用于根据Bootstrap项目的样式准则创建“盒装”内容。

如果要“开箱即用”创建全宽网格，则只能row使用内部具有列的元素（跨度通常为12cols）。

的container和row类是对身体内的元素。因此，基本布局为：

<html>
 <body>
  <div class="container">
   <div class="row">
     <div class="col-md-xx"></div>
       ...
   </div>
   <div class="row">
     <div class="col-md-xx"></div>
       ...
   </div>
  </div>
 </body>
</html>

对于盒装响应式布局。

如果您省略，则将container获得全角布局。

巨无霸示例

巨无霸就是这种container行为的一个很好的例子。如果将Jumbotron元素放在一个元素中，则该container元素将具有圆形边框和基于响应宽度的固定宽度。如果Jumbotron在容器外部，则它将跨越全宽而没有边界。

Question 3

我想知道相同的内容，并了解我经历了bootstrap.css版本3。答案就从第3行开始。1585至1605。为了更好地理解，我将在此处张贴这些行。

.container
{
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

整个代码是不言自明的。然而，为了进一步说明本，容器将采取750px如果屏幕宽度之间768px和992px等作为代码所示。现在，对于大于1200的常规屏幕分辨率，容器将采用1170px，但减去30 px（15px+15px）的填充，左侧的有效空间为1140px，该有效空间在屏幕上居中，因为左右边距设置为auto。

现在，在的情况下class="row"，有以下代码：

.row {
  margin-right: -15px;
  margin-left: -15px;
}

因此，如果row位于容器内部，则可以有效地从容器的每一侧抓取15px的填充并使用全部空间。但是，如果类行位于body标记内，则由于负边距，它倾向于从可见区域移到浏览器的左侧和右侧。

我希望事情已经清楚了。

Question 4

容器

容器在响应宽度上提供了宽度限制。当响应大小发生变化时，容器会发生变化。行和列均基于百分比，因此无需更改。请注意，每边有15px的边距，被行取消。

行数

行应始终位于容器中。

该行为列提供了一个居住的地方，理想情况下，列的总数为12。它还可以作为包装器使用，因为所有列都向左浮动，当浮动变得怪异时，其他行不会重叠。

行的每边也有15px的负边距。组成该行的div通常会被限制在容器填充的内部，触摸粉红色区域的边缘，但不能超出。15px的负边距将行推到容器顶部15px的填充上方，实际上使行无效。此外，行确保您其中的所有div都显示在自己的行上，与上一行和下一行分开。

列

列现在具有15px的填充。这种填充意味着列实际上接触行的边缘，由于行具有负边距，而容器具有正的填充，列本身就接触容器的边缘。但是，列上的填充将列内的任何内容推入所需的位置，并在列之间提供30px的装订线。切勿在行外使用列，否则将无法使用。

有关更多信息，建议您阅读本文。确实很清楚，并且很好地解释了Bootstrap的网格系统如何工作。

Question 5

“容器”类将内容包装在视口的中心。可以将带有in主体标签的整个内容放置在结果中，并在页面中心以指定宽度显示页面。

当您需要将内容放在一行中的列中时，可以使用“行”类，每行最多可以有12列。

Question 6

在传统的CSS惯例中，您可能会使用以下类：

wrapper, header, navigator, contents, footer

以上类的用法可以像下面的例子：

<body>
    <div class="wrapper">
        <div class="header">

        </div>
        <div class="navigator">

        </div>
        <div class="content">

        </div>
        <div class="footer">

        </div>
    </div>

</body>

在引导程序中，您可以根据需要使用，也可以使用上面的模板来创建引导程序类，例如：

<body>

    <div class="container">
        <div class="col-md-12">
            <h1>Header</h1>
            <p>Header contents goes here</p>
        </div>
        <div class="col-md-12">
            <nav role="navigation" class="nav navbar">
                <h1>Navigation</h1>
                <p>Navigation contents goes here</p>
            </nav>
        </div>
        <div class="col-md-12">
            <div class="pagination">
                <h1>Page contents</h1>
                <p>Webpage contents goes here</p>
            </div>

        </div>
        <div class="col-lg-12">
            <h1>Footer contents</h1>
            <p>footer contents goes here</p>
        </div>
    </div>

</body>

对于行类，当您要为页面设计表格布局时，可以使用行类，但是当您要以表格式显示数据时，则应使用表类，但表不会响应。

要创建不同于数据表的表格布局，请使用以下示例中的行类：

<body>

<div class="container">
    <div class="row">
    <div class="col-sm-4" >.col-sm-4</div>
    <div class="col-sm-4" >.col-sm-4</div>
    <div class="col-sm-4" >.col-sm-4</div>
  </div>
</div>

</body>

您必须避免使用基于表的布局，并尝试使用此处所述的响应表