28

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

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

4

3 回答 3

17

您可以为此创建一个 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;
}

更新 Bootply

对于 Bootstrap 4,请参阅:Remove gutter space for a specific div only

于 2013-11-11T17:34:39.250 回答
6

要定义 3 列网格,您可以使用定制器或下载源设置您的较少变量并重新编译。

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

在您使用 960px 容器的情况下,请考虑中等网格(另请参见: 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
于 2013-11-11T19:26:08.187 回答
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 的边距。也许有人可以解释一下?

查看我创建的示例:

演示
代码

于 2014-11-27T01:08:24.613 回答