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

Question

新的Bootstrap 3网格系统非常棒。它在所有屏幕尺寸的响应式设计中功能更强大，嵌套更容易。

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

Answer 1

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

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

但是：ぁzxswい

编辑如果您只想要列之间的间距，您可以选择除了第一个和最后一个之外的所有列，如下所示。

http://bootply.com/93473

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

对于Bootstrap 4，请参阅：Updated Bootply

Answer 2

要定义3列网格，您可以使用Remove gutter space for a specific div only或下载源设置较少的变量并重新编译。

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

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

在你的情况下，容量为960px考虑中等网格（另见：Reduce the gutter (default 30px) on smaller devices in Bootstrap3?）。此网格的最大容器宽度为970px。当设置http://getbootstrap.com/css/#grid并在变量中设置@grid-columns:3;时，你会得到：

@grid-gutter-width:15px;

Answer 3

（代表OP发布）。

我相信我明白了。

就我而言，我添加了15px | 1st column (298.33) | 15px | 2nd column (298.33) |15px | 3th column (298.33) | 15px 。

然后添加了[class*="col-"] {padding: 0 7.5px;};。

这很有效，除了两边都有1px的余量。所以我只是让.row {margin: 0 -7.5px;}到.row {margin: 0 -7.5px;}，然后它完美地工作。

我不知道为什么有1px的保证金。也许有人可以解释一下吗？

查看我创建的示例：

.row {margin: 0 -8.5px;} Demo