如何在 Bootstrap 3 网格系统中调整装订线？

Posted 2023-02-22

【中文标题】如何在 Bootstrap 3 网格系统中调整装订线？

【英文标题】：How to adjust gutter in Bootstrap 3 grid system?

【发布时间】：2013-11-23 13:46:39

【问题描述】：

新的 Bootstrap 3 网格系统很棒。它对于所有屏幕尺寸的响应式设计都更强大，并且更容易嵌套。

但我有一个问题我无法弄清楚。如何在列之间添加精确的间隙？假设我有 960px 的容器，310px 的 3 列和 3 列之间 15px 的 2 个排水沟。我该怎么做？

【问题讨论】：

这看起来不错。我喜欢的第一个结果。大多数只是不显示使文本靠在边缘的填充。我尝试使用 jsfiddle 重现您的答案。 jsfiddle.net/0ddum192 但我没有阴沟。有人知道出了什么问题吗？

【参考方案1】：

您可以为此创建一个 CSS 类并将其应用于您的列。由于间距（列之间的间距）由 Bootstrap 3 中的填充控制，因此请相应地调整填充：

.col 
  padding-right:7px;
  padding-left:7px;

演示：http://bootply.com/93473

编辑如果你只想要列之间的间距，你可以像这样选择除第一个和最后一个之外的所有列..

.col:not(:first-child,:last-child) 
  padding-right:7px;
  padding-left:7px;

Updated Bootply

对于 Bootstrap 4，请参阅：Remove gutter space for a specific div only

【讨论】：

感谢您的快速回复。

但是这样它也会为第一个孩子添加填充。这不正是我想要的。我在想的是，也许我可以添加使容器 975px，并添加 padding-right: 15px;到.col。当屏幕尺寸改变时，我必须删除那个 padding-right: 15px;。另外，如果我在页面上有其他元素。我需要添加这个 padding-right: 15px;并在屏幕尺寸发生变化时将其删除。我不确定这是否是在 Bootstrap 3 中处理带有装订线的列的最佳方法。

我认为您不需要提及第一个孩子或最后一个孩子，因为引导程序 3 中的所有列元素在左侧和右侧都遵循相同的边距或填充。

【参考方案2】：

要定义 3 列网格，您可以使用 customizer 或下载源设置您的 less 变量并重新编译。

要了解有关网格和列/装订线宽度的更多信息，另请阅读：

Bootstrap 3 - Set Container Width to 940px Maximum for Desktops? Why does Bootstrap 3 force the container width to certain sizes? Bootstrap 3 Gutter Size Reduce the gutter (default 30px) on smaller devices in Bootstrap3?

如果您使用 960 像素的容器，请考虑中等网格（另请参阅：http://getbootstrap.com/css/#grid）。此网格的最大容器宽度为 970 像素。 在 variables.less 中设置@grid-columns:3; 和@grid-gutter-width:15px; 时，您将得到：

15px | 1st column (298.33) | 15px | 2nd column (298.33) |15px | 3th column (298.33) | 15px

【讨论】：

+1 对于 Bootstrap 3.3.6，下载 LESS 文件可能是最有效的方法。谁真的想进入一个 .CSS 文件并手动修改 x 个 Bootstraps 选择器？？？并且只在需要另一个 Bootstrap 项目时再做一次？让 LESS 完成所有繁重的工作。

【参考方案3】：

（代表 OP 发布）。

我相信我想通了。

就我而言，我添加了[class*="col-"] padding: 0 7.5px;;。

然后添加.row margin: 0 -7.5px;。

这很好用，只是两边都有 1px 的边距。所以我只是把.row margin: 0 -7.5px; 变成.row margin: 0 -8.5px;，然后它就完美地工作了。

我不知道为什么会有 1px 的边距。也许有人可以解释一下？

查看我创建的示例：

DemoCode

【讨论】：

当你嵌套行或者你有一列或两列的行时，你需要更具体一点：div[class^="col-"]:not(:first-child) padding-left:7px; div[class^="col-"]:not(:last-child) padding-right:7px;