如何在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.

但是我有一个我不知道的问题.如何在列之间添加精确的间距?假设我有960px的容器，3个310px的列和3个15px的2个装订线.我该怎么办?

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中的填充控制的，因此请相应地调整填充:

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，请参阅:

Updated Bootply

For Bootstrap 4 see: Remove gutter space for a specific div only

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