改变Bootstrap排水沟

Question

我使用的是Bootstrap v3.3.4，我对它很陌生。

有没有简单的方法可以更改Bootstrap装订线而无需从较少的文件中重新编译它或使用网站编辑器或任何其他与修改bootstrap.css有关的方式？

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

我尝试过使用它：

in.setstate(failbit)

得到了理想的结果。

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

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

Answer 1

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

如果您想保留默认的30px装订线尺寸但是您想要针对特定​​情况使用自定义装订线，则可以使用make-row和make-column mixins的装订线宽度参数：

@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 2

我找到了一个解决方案：

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

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

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

Answer 3

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

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和Bootstrap