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

Question

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

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

Answer 1

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

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

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

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

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

Updated Bootply

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

Answer 2

要定义3列网格，您可以使用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
• Reduce the gutter (default 30px) on smaller devices in Bootstrap3?

对于容量为960px的情况，请考虑中等网格（另请参阅：http://getbootstrap.com/css/#grid）。此网格的最大容器宽度为970px。 设置@grid-columns:3;并在变量中设置@grid-gutter-width:15px;时，您将获得：

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

Answer 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的保证金。也许有人可以解释一下？

参见我创建的示例：

Demo
Code