关于 Bootstrap Grid 系统答案

【问题标题】：About Bootstrap Grid system关于 Bootstrap Grid 系统
【发布时间】：2021-04-22 01:30:41
【问题描述】：

我对bootstrap 3.3.5的源代码中的这部分代码感到困惑

/*line 1585 - 1590*/
.container {
  padding-right: 15px;
  padding-left: 15px;
}
/* line 1612 - 1615*/
.row {
  margin-right: -15px;
  margin-left: -15px;
}

它们是做什么用的？
-------------------------------------------
谢谢大家！
这是我看完你的回答后的看法：
1.给.container添加填充，使.container的内容远离边界；
2.但这意味着现在第一个/最后一个列距离边界 2 个填充，不太好。因此，添加 .row 负边距以将其延伸到边界。
我说的对吗？
顺便说一句，我问这个问题是因为我看不出我是否删除这两个规则的区别。

【问题讨论】：

你为什么要问？您是否阅读过 Bootstrap 文档？ getbootstrap.com/css/#grid
Bootstrap 文档足以教你学习。如果不希望这些填充 dnt 使用它们或编写你自己的类和 css

标签： css twitter-bootstrap

【解决方案1】：

一般来说，容器如其所述，会在左右两侧添加内边距，这样内容就不会直接到达屏幕边缘，从而使其可用于移动设备并且更易于阅读。

使用列时，它们会向左右添加填充，这可能会与其余内容“不对齐”，因此您可以将它们包装成一行，使用负边距使该填充与其余内容。

同样，这是为了让它看起来更加整齐和干净。

来自引导文档 (http://getbootstrap.com/css/#grid)：

行必须放置在 .container（固定宽度）或 .container-fluid（全角）用于正确对齐和填充。

使用行来创建水平的列组。

应该放置内容在列内，并且只有列可以是行的直接子级。

【讨论】：

谢谢！ 1.给.container添加padding，使.container的内容远离边界； 2. 但这意味着现在第一个/最后一个列距离边界 2 个填充，不是很好。因此，添加 .row 负边距以将其延伸到边界。我对吗？顺便说一句，我问这个问题是因为我看不出我是否删除这两个规则的区别。
所以是的，这基本上是正确的，如果你在 .container 中有两列，它们将在列的左侧和右侧有 15px 的填充。将这两列包裹在 .row 中会将这些列推到 .container div 的绝对边界，使它们再次很好地对齐。

【解决方案2】：

行应始终放置在容器内以确保适当的间距（在页面内容和浏览器边缘之间）。如果您不在容器内放置一行，则该行将比视口的宽度宽，导致水平滚动条。

Bootstrap 行使用负边距来抵消容器的填充。最终结果是容器内行的两侧没有视觉间距（边距或填充）。这对于响应式设计确保均匀间距非常重要，因为列可能会垂直环绕或堆叠（更改每行中显示的列数）。

Bootstrap 4也是如此。

另见：
Bootstrap Rows and Columns - Do I need to use row?
How the Bootstrap grid works

【讨论】：

【解决方案3】：

Bootstrap 列具有 15 像素的左右填充，以便它们的内容被适当地隔开。但是，这会将第一列和最后一列的内容推离父列 15px。作为补偿，该行具有负的左右 15px 边距。这就是为什么您应该始终将列放在行中。

【讨论】：