更改 Bootstrap 个装订线

Question

我正在使用 Bootstrap v3.3.4，我对它还很陌生。

是否有任何简单的方法来更改 Bootstrap 装订线而不用从 less 文件重新编译它或使用网站编辑器或任何其他与修改 bootstrap.css 有关的方式？

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

我试过使用这个：

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

并得到了想要的结果。

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

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

Answer 1

我找到了一个解决方案：

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

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

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

Answer 2

将它们放在容器中。然后使用bootstrap提供的网格系统。如果你的比例正确，那么它就会对齐。那会解决你的问题，如果我理解正确的话

Answer 3

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

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

@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 mixins 比在编译后尝试更改 CSS 容易得多。

Answer 4

您可以通过样式表中的 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

更改 Bootstrap 个装订线

Change Bootstrap gutter

html

css

less

twitter-bootstrap