Question

请向我们解释何时使用课程container和row。我不确定，因为Bootstrap的文档对这一部分还不太清楚。

我正在使用Bootstrap 3。

Answer 1

container是row元素的容器。

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

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

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

如果你想“开箱即用”创建一个全宽网格，你只能使用row个元素，里面有列（通常是12个元素）。

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，您将获得全宽布局。

Jumbotron示例

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

Answer 2

我想知道同样的事情并且理解我经历了版本3的bootstrap.css。答案在于行号。 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，由于左右边距设置为自动，因此以屏幕为中心。

现在，如果是class="row"，则代码如下：

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

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

我希望它已经明确了。

Answer 3

<强>容器

容器提供响应宽度的宽度限制。当响应大小改变时，它就是容器的变化。行和列都是基于百分比的，因此它们不需要更改。请注意，每边有15px的边距，被行取消。

<强>行

行应始终位于容器中。

该行为列提供了一个可以存活的位置，理想情况下具有最多为12的列。它还充当包装器，因为所有列都向左浮动，当浮点数变得奇怪时，其他行没有重叠。

每行的负余量也为15px。构成行的div通常会被限制在容器填充内部，触及粉红色区域的边缘但不会超出。 15px负边距将行推出容器15px填充顶部，基本上否定了它。此外，行确保它内部的所有div都显示在它们自己的行上，与前一行和后一行分开。

<强>列

列现在有15px填充。这种填充意味着列实际上接触行的边缘，该行本身接触容器的边缘，因为行具有负边距，并且容器具有正填充。但是，列上的填充将列中的任何内容推送到需要的位置，并且还在列之间提供30px的装订线。切勿在一行外使用列，否则无效。

有关详情，建议您阅读this article。它非常清楚，并且很好地解释了Bootstrap的网格系统是如何工作的。

Answer 4

Class'container'将内容包装到view port的中心。带有body标签的整个内容可以放在页面中心显示指定宽度的页面的结果中。

当您需要将内容放在一行中的行中时，使用类'row'，每行最多可以包含12列。

Answer 5

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

ret

上述类的用法可以像这样的例子：

wrapper, header, navigator, contents, footer

在bootstrap中，您可以根据需要使用，或者如果您习惯上述模板，则可以使用此示例中的引导类：

<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>

您必须尽量避免使用基于表格的布局，并尝试使用如here所述的响应表

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

5 个答案:

Jumbotron示例