85

请向我解释何时使用这些类containerrow. 我不确定,因为 Bootstrap 的文档对此部分非常不清楚。

我正在使用引导程序 3。

4

6 回答 6

91

containerrow元素的容器。

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

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

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

如果你想“开箱即用”创建一个全宽网格,你可以只row使用里面有列的元素(跨越通常的 12cols 总数)。

containerrow类用于主体内的元素。所以一个基本的布局是:

<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 在容器之外,它会跨越全宽,没有边界。

于 2013-11-14T17:07:39.620 回答
23

我想知道同样的事情,并了解我经历了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) 的 padding 后,剩余的有效空间为1140px,因为左右边距设置为 auto,所以它以屏幕为中心居中。

现在,在 的情况下class="row",有以下代码:

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

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

我希望已经说清楚了。

于 2015-07-30T11:31:58.923 回答
1

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

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

于 2013-11-14T17:22:06.567 回答
1

容器

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


行应始终位于容器中。

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

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


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


有关更多信息,我建议您阅读这篇文章。非常清楚,并且很好地解释了 Bootstrap 的网格系统是如何工作的。

于 2016-10-10T14:54:33.060 回答
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>

在引导程序中,如果您愿意或者如果您习惯了上述模板,您可以使用引导程序类,如下例所示:

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

您必须尽量避免使用基于表格的布局,并尝试使用此处描述的响应式表格

于 2015-07-08T22:41:56.537 回答
0

2021 年更新

为了未来读者的利益,自 Bootstrap 3 最初提出这个问题以来,Bootstrap Grid (container/row/col) 已经发展。但是,许多概念和“规则”仍然适用:

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

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

所以...

1 - 使用容器容器流体来包含整个页面布局。您可以将任何内容(文本、图像、标题)放入容器中。Bootstrap 5现在提供了额外的响应式容器

2 - 如果您想要多列布局,请使用Grid。网格由至少 1组成,其中包含 1 列或更多列 ( col *)。您可以在一行中放置超过 12 列。使用单独行的唯一原因是创建一个新的水平分区。

绝不...

  • 使用col-*不带 a 的 a row,因为它是直接父级。
  • 将内容直接放在row.
于 2021-08-14T12:13:11.787 回答