何时应该在Twitter Bootstrap中使用container和row？

Question

何时应该在Twitter Bootstrap中使用container和row？

twitter-bootstraptwitter-bootstrap-3bootstrap-5

90

请说明何时使用 container 和 row 类。因为Bootstrap的文档在这一部分上不太清楚。我正在使用Bootstrap 3。

- CodeShark

1

阅读这篇关于Bootstrap的行和列的文章：https://medium.com/wdstack/how-the-bootstrap-grid-really-works-471d7a089cfc - Carol Skelly

6个回答

23

我也曾经想过同样的问题，为了理解这个问题，我查看了版本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;
  }
}

整个代码都是自解释的。然而，为了详细说明，如果屏幕宽度在768px和992px之间，容器将占用750px，代码如此显示。现在，对于大于1200的常见屏幕分辨率，容器将占用1170px，但减去30 px（15px+15px）的填充，剩下的有效空间为1140px，这是居中于屏幕上，因为左右边距设置为自动。

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

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

所以，如果row在容器内，它将有效地从容器中夺取每侧15像素的填充，并使用所有空间。但是，如果class row在body标签内，由于负边距，它往往会移出可见区域进入浏览器的左侧和右侧。

我希望已经讲清楚了。

- user5173334

但是由于您不在没有列的情况下使用行，所以这没关系，因为列再次具有15px的填充。所以一切基本上都很完美。 - Falk

1

类名为“container”的容器将内容居中显示在视口内。整个body标签内的内容可以放置在容器中，以指定宽度的方式居中显示在页面上。

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

- code2use

1

容器

容器为响应式宽度提供了宽度限制。当响应式大小改变时，容器会随之改变。行和列都是基于百分比的，因此它们不需要改变。请注意，每个侧面都有15像素的边距，被行取消。

行

行应该始终位于容器中。

行为列提供了一个生存的地方，理想情况下，这些列加起来等于12。它还充当了包装器，因为所有的列都向左浮动，当浮动变得奇怪时，附加的行不会重叠。

行两侧还有15像素的负边距。构成行的div通常会被限制在容器内的填充内，接触到粉色区域的边缘但不能超出。15像素的负边距将行推出到容器15像素的填充之上，从而抵消了它。此外，行确保其内部的所有div都出现在自己的一行上，与前面和后面的行分开。

列

现在的列有15像素的填充。这个填充意味着列实际上与行的边缘相接触，而行本身则与容器的边缘相接触，因为行具有负边距，而容器具有正填充。但是，列上的填充将列内部的任何内容推向所需位置，并提供列之间的30像素间距。永远不要在行外使用列，它不起作用。

如果需要更多信息，我建议您阅读这篇文章。它非常清晰，并且很好地解释了Bootstrap的网格系统是如何工作的。

- Mistalis

这是一个复制并粘贴相同答案。 - Carol Skelly

1

2021年更新

为了方便未来的读者，Bootstrap网格（container/row/col）自Bootstrap 3以来已经发生了变化。然而，许多概念和“规则”仍然适用：

“容器是Bootstrap中最基本的布局元素，在使用默认网格系统时必需。”
“行是列的包装器。每个列都有水平填充（称为间距），用于控制它们之间的空间。然后在行上通过负边距抵消这个填充，以确保您列中的内容在左侧对齐。”

因此...

1- 使用容器或container-fluid来包含整个页面布局。您可以在容器中放置任何内容（文本、图像、标题）。Bootstrap 5现在提供其他响应式容器。

2 - 如果你想要使用多列布局，请使用网格。该网格至少包含1个行，其中包含1个或多个列（col*）。您可以在单个行中放置超过12个列。唯一需要使用单独的行的原因是创建新的水平分隔线。

永远不要...

将 col-* 直接放在没有 row 的父元素内。
直接在 row 中放置内容。

- Carol Skelly

0

在传统的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>

在Bootstrap中，如果您希望或者习惯以上模板，您可以使用Bootstrap类，例如此示例：

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

您应该尽量避免使用基于表格的布局，而是尝试使用响应式表格，如此处所述。

- Ashraf Sada

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paolo Casciello · Accepted Answer

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行为的一个很好的例子。如果在container元素中放置Jumbotron元素，则其具有带圆角的边框和基于响应式宽度的固定宽度。如果Jumbotron在容器外部，则跨越整个宽度而没有边框。