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

Question

我喜欢 Bootstrap，它很棒，但当我喜欢它们的当前宽度时，它会不断尝试使我的 .span3 类元素越来越靠近。在需要调整使用 .span3 类的元素之前，我如何让 Bootstrap 冷静下来？假设当屏幕尺寸为 1170 像素宽或更大时，一切都很好地间隔开，但是，当我到达大约 980 像素宽的某个地方时，Bootstrap 将一切都拉近一点，但我不需要它。我怎样才能让 Bootstrap 冷静下来进行调整，直到屏幕尺寸达到 767px 左右。

我创建了一个 JSFiddle对你们这些优秀的天才也是如此。

据我所知，媒体查询是最好的调用，例如:

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

Answer 1

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

1) 如果您手动编辑 LESS 文件

在“variables.less”中查找这一行。

@gridGutterWidth768:      20px;

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

2) 如果您要创建覆盖 CSS 文件

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

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