更改 Bootstrap 装订线答案

【问题标题】：Change Bootstrap gutter更改 Bootstrap 装订线
【发布时间】：2015-08-07 07:29:42
【问题描述】：

我正在使用 Bootstrap v3.3.4，而且我还很陌生。

是否有任何简单的方法来更改 Bootstrap gutter，而无需从其较少的文件或使用网站编辑器或任何其他与修改 bootstrap.css 有关的方式重新编译它？

我想要做的是在 2 个列之间获得 5px 的空间，我希望将更改放在我的 extra.less 文件中。

我试过用这个：

div[class^="col-"]:not(:first-child) {padding-left: 2.5px;}
div[class^="col-"]:not(:last-child) {padding-right: 2.5px;}

并且得到了想要的结果。

但我在调整大小时遇到了这个问题：

所以，如果有的话，我必须找到更好的方法。我做了一些挖掘，实现的唯一方法是从较少的文件中更改它并使用修改后的 bootstrap.css，我试图避免这种情况。

【问题讨论】：

标签： html css twitter-bootstrap less

【解决方案1】：

您可以通过样式表中的 CSS 更改装订线宽度。重要的是相应地更改所有三个元素（容器、行、列）以防止您在图像中出现的问题。

.container {
    padding-right: 5px;
    padding-left: 5px;
}

.row {
    margin-right: -5px;
    margin-left: -5px;
}

.row [class*="col"],
.row [class*="col-"] {
    padding-right: 5px;
    padding-left: 5px;
}

适用于 Bootstrap 3 和 4

【讨论】：

【解决方案2】：

您提到不想重新编译 Bootstrap 的 LESS（我猜您的意思是您不想更改 @grid-gutter-width 值），但您也提到您正在使用 LESS，因为您有一个“额外的.少”文件。您是将 Bootstrap 作为 LESS 文件本身还是作为 CSS 文件导入？将 Bootstrap 的 LESS 直接导入到您自己的 LESS 文件中，您可以更改变量或使用它们的 mixin，而无需重新编译它们的 CSS（因为它们的 CSS 只是使用您自己的 LESS 文件编译的）。

如果您想保留默认的 30 像素装订线大小，但又希望针对特定情况使用自定义装订线，您可以为 make-row 和 make-column 混合使用装订线宽度参数：

@condensed-gutter-width: 5px;
.row-condensed {
  .make-row(@condensed-gutter-width);
  .col-lg-1 {
    .make-lg-column(1, @condensed-gutter-width);
  }
  //... do this for any column that'll go inside a .row-condensed
}

（SASS 也一样，除了 @include make-row($condensed-gutter-width) 和 @include make-lg-column(1, $condensed-gutter-width)。）

我发现在我自己的 LESS 中使用 LESS 混合比在 CSS 已经编译后尝试更改它要容易得多。

【讨论】：

我的问题的一个非常有趣的解决方案，谢谢。是的，我在混音中使用的较少，参考。

【解决方案3】：

把它们放在一个容器上。然后使用bootstrap提供的网格系统。如果你得到正确的比例，它将被对齐。如果我理解正确，那将解决您的问题

【讨论】：

已经在容器中了，我用的是网格系统，你看完了吗？
@c4ta1n 我读过它，但后来我不太明白您是否使用了 Bootstrap 的 col。你的比例对吗？这也可能是个问题
Bootstrap 有列和行是最基本的东西之一。到目前为止我没有任何问题。

【解决方案4】：

我找到了一个解决方案：

div[class^="col-"] {
  padding-left: 2.5px;
  padding-right: 2.5px;
}

.row {
  margin-left: -2.5px;
  margin-right: -2.5px;
}

如果你有更好的方法，请告诉我。

【讨论】：