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

Posted 2023-03-05

技术标签:

【中文标题】我啥时候应该在 Twitter Bootstrap 中使用容器和行？【英文标题】：When should I use container and row in Twitter Bootstrap?我什么时候应该在 Twitter Bootstrap 中使用容器和行？ 【发布时间】：2013-11-27 19:54:39 【问题描述】：

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

我正在使用 Bootstrap 3。

【问题讨论】：

Read this article 关于 Bootstrap 的行和列 【参考方案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 在容器之外，它会跨越全宽，没有边框。

【讨论】：

那么，给 HTML 主体提供类容器是一种好的做法还是不好的做法？如果不好，为什么？ @CodeShark 这很糟糕，因为它是布局的结构部分。例如，您可能需要一个全角导航栏和一个全角页脚，但需要一个装箱的页面内容。 如果你想“开箱即用”地创建一个全宽网格，你只能使用带有列的 row 元素（跨越通常的 12 列）。我认为您可以为此使用container-fluid 和row-fluid。（这里是 Bootstrap 初学者，请加一点盐。）【参考方案2】：

我想知道同样的事情，并了解我经历了第 3 版的bootstrap.css。答案就在第 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;

整个代码是不言自明的。但是，为了详细说明这一点，如果屏幕宽度在768px 和992px 之间，容器将采用750px，以此类推，如代码所示。现在，对于1200以上的普通屏幕分辨率，container会取1170px，但减去30 px的padding（15px+15px），剩下的有效空间是1140px，以屏幕为中心作为margin左右的设置为自动。

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

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

因此，如果 row 在容器内，它将有效地从容器中抢夺每边 15px 的填充并使用整个空间。但是如果类行在body标签内，由于负边距，它往往会从可见区域移到浏览器的左侧和右侧。

希望大家说清楚。

【讨论】：

但是由于您不使用没有列的行，所以没关系，因为列的填充又是 15 像素。所以一切都很完美。【参考方案3】：

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

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

【讨论】：

【参考方案4】：

容器

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

行

行应始终位于容器中。

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

行的每边也有 15 像素的负边距。组成该行的 div 通常会被限制在容器填充内，接触粉红色区域的边缘但不会超出。 15px 的负边距将行推到容器 15px 填充的顶部，基本上否定了它。此外，行确保您在其中的所有 div 都出现在自己的行上，与前一行和后一行分开。

列

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

更多信息，我建议你阅读this article。讲的很清楚，也很好的解释了Bootstrap的网格系统是如何工作的。

【讨论】：

这是copy-paste of the same answer【参考方案5】：

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

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

【讨论】：

【参考方案6】：

2021 年更新

为了未来读者的利益，自 Bootstrap 3 最初提出这个问题以来，Bootstrap Grid（容器/行/列）已经发展。但是，许多概念和“规则”仍然适用：

“容器是 Bootstrap 中最基本的布局元素，在使用我们的默认网格系统时是必需的。”

"行是列的包装器。每一列都有水平填充（称为装订线）来控制它们之间的空间。然后在行上抵消这种填充负边距，以确保列中的内容在视觉上与左侧对齐。"

所以……

1 - 使用 container 或 container-fluid 来包含整个页面布局。您可以将任何内容（文本、图像、标题）放入容器中。 Bootstrap 5 现在提供additional responsive containers。

2 - 如果您想要多列布局，请使用 the Grid。网格由至少 1 个 row 组成，其中包含 1 个或多个列 (col*)。 You can put more than 12 columns in a single row。使用单独行的唯一原因是创建一个新的水平分区。

永远...

使用不带row 的col-* 作为其直接父级。将内容直接放在row 中。