新的 Bootstrap 3 网格系统很棒。它对于所有屏幕尺寸的响应式设计都更强大,并且更容易嵌套。
但我有一个问题我无法弄清楚。如何在列之间添加精确的间隙?假设我有 960px 的容器,310px 的 3 列和 3 列之间 15px 的 2 个排水沟。我怎么做?
新的 Bootstrap 3 网格系统很棒。它对于所有屏幕尺寸的响应式设计都更强大,并且更容易嵌套。
但我有一个问题我无法弄清楚。如何在列之间添加精确的间隙?假设我有 960px 的容器,310px 的 3 列和 3 列之间 15px 的 2 个排水沟。我怎么做?
您可以为此创建一个 CSS 类并将其应用于您的列。由于间距(列之间的间距)由 Bootstrap 3 中的填充控制,因此请相应地调整填充:
.col {
padding-right:7px;
padding-left:7px;
}
编辑如果您只想要列之间的间距,您可以选择除第一个和最后一个之外的所有列,就像这样..
.col:not(:first-child,:last-child) {
padding-right:7px;
padding-left:7px;
}
对于 Bootstrap 4,请参阅:Remove gutter space for a specific div only
要定义 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