html - 我们怎样才能最小化 bootstrap 3 中的 gutter-width？

Question

我们如何在 bootstrap 3 中最小化 gutter-width？由于 Bootstrap 遵循 12 网格系统，因此当我使用 col-sm-* 放置我的内容时，它会在元素之间留出一些像素的间隙(比如 30px，即网格列两侧的 15px)，但我的要求主题不需要太多列之间的空间。所以，我应该怎么做才能最小化那个空间？

Answer 1

如果您不想生成自定义的 Bootstrap 构建，这里有一种 CSS 技术将覆盖列之间的 Bootstrap 填充(装订线)。

/* remove spacing between middle columns */
.row.no-gutter [class*='col-']:not(:first-child):not(:last-child) {
  padding-right:0;
  padding-left:0;
}
/* remove right padding from first column */
.row.no-gutter [class*='col-']:first-child {
  padding-right:0;
}
/* remove left padding from last column */
.row.no-gutter [class*='col-']:last-child {
  padding-left:0;
}

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

另一种选择(将装订线减少一半 - 15px):

.row-smaller {
    margin-left: -7.5px;
    margin-right: -7.5px;
}

.row-smaller > div[class^="col"] {
    padding-left: 7.5px;
    padding-right: 7.5px;
}

演示:https://www.codeply.com/go/pb9pQzThUy

此技术也适用于 Bootstrap 4:https://www.codeply.com/go/SZcY3X4hTY