如何在 Bootstrap 3 网格系统中调整装订线? [英] How to adjust gutter in Bootstrap 3 grid system?

问题描述

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

The new Bootstrap 3 grid system is great. It's more powerful for responsive design at all screen sizes, and much easier for nested.

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

But I have one issue I could not figure out. How do I add precise gap between the columns? Say I have container 960px, 3 columns at 310px and 2 gutters at 15px in between 3 columns. How do I do that?

推荐答案

您可以为此创建一个 CSS 类并将其应用于您的列.由于装订线(列之间的间距)在 Bootstrap 3 中由 padding 控制，因此相应地调整 padding:

You could create a CSS class for this and apply it to your columns. Since the gutter (spacing between columns) is controlled by padding in Bootstrap 3, adjust the padding accordingly:

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

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

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

EDIT If you only want the spacing between columns you can select all cols except first and last like this..

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

更新的 Bootply

对于 Bootstrap 4，请参阅:仅删除特定 div 的装订线空间

这篇关于如何在 Bootstrap 3 网格系统中调整装订线?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！