防止Bootstrap在必要时调整页边距宽度

Question

我喜欢Bootstrap，它很棒，但当我喜欢它们当前的宽度时，它会不断尝试将我的.span3类元素越来越紧密地联系在一起。在我使用.span3类的元素需要调整之前，我如何让Bootstrap冷静下来呢？比方说，当屏幕尺寸为1170px宽或更大时，一切都很好，然而，当我达到980px宽的某个地方时，Bootstrap会让所有东西都更近一点，但我不需要它。在屏幕尺寸达到767px左右之前，我如何让Bootstrap冷静下来进行调整。

我也为你们这些优秀的天才们创建了一个JSFiddle。

据我所知，媒体查询是最好的选择，如下所示：

@media (min-width: 768px){
    .span3: chill out;
}
@media (max-width: 767px){
    .span3: do yo thang;
}

Answer 1

这是Bootstrap响应能力的一部分。在常规尺寸下，网格列之间的间距为20px，但在超大屏幕宽度(1200px+)时，它会将间距放松到30px。

1)如果您正在手动编辑较少的文件，

在"variables.less“中查找此行。

@gridGutterWidth768:      20px;

将其更改为30px。重新编译更少。

CSS 2)如果你正在创建一个覆盖文件

将其包含在您的自定义CSS文件中，并确保在bootstrap之后包含/导入它。

@media (min-width: 768px) and (max-width: 979px) {
  .row {
    margin-left: -30px;
  }
  [class*="span"] {
    margin-left: 30px;
  }
}