Question

我们如何最小化bootstrap 3中的装订线宽度？由于Bootstrap遵循12网格系统，所以当我使用col-sm- *放置我的内容时，它会在元素之间产生一些像素之间的差距（比如30px，即网格列两侧的15px）但是我的要求是主题在列之间不需要太多空间。 sO，我该怎么做才能减少这个空间？

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

Answer 2

使用bootstrap customize。

在此编辑器中编辑@grid-gutter-width值。

Answer 3

如果您使用的是sass，请在gutter中查找单词bootstrap\scss\_variables.scss。在没有!default的情况下，将必要的变量复制并覆盖到您自己的sass文件中。

我们如何最小化bootstrap 3中的装订线宽度？

3 个答案: