Bootstrap 布局：默认网格系统 VS 流体网格系统

Question

我有这个引导模板，我必须在其中覆盖 css 来修改主题。但是，模板使用的是bootstrap的默认网格系统，而不是我经常使用的流体网格系统。流体网格系统使我可以更轻松地调整其余跨度（.span12、.span9 等）而无需覆盖它们，因为它是动态的。我只需要更改容器大小。

然而，在引导模板的默认网格系统中（.span12，.container 等于 1200px），虽然它也是响应式的，但我发现跨度有一个默认的固定值。所以当我这样设置我的css时：

.container {
max-width: 940px;
padding: 0 20px;
}

这似乎适用于其他布局，但是当我缩小并检查 1200 像素的网站时，一切都到位了。我以为我可以用这个来解决它：

@media (min-width: 1200px) {
.span12, .container {
    width: 940px;
}

.container {
    padding: 0 20px;
}}

但是，由于容器比以前小，该布局中的其余跨度仍处于默认固定宽度并且彼此下方。它不会调整，在流体网格系统中不会发生 w/c（平滑调整）。

例如，在 1200px 分辨率下，.span3 的宽度仍然为 270px。因此，当我将四个 .span3 div 放在一起时，这将加起来为 1080 像素。但这不可能，因为我只需要 940 像素的宽度和 20 像素的边距。

Answer 1

我认为您已经在自己的问题中回答了这个问题。也只需为 span 类分配一个固定宽度：

@media (min-width: 1200px) {
.container  {
        width: 940px;
        margin: 0 auto;
    }

.span3 {
  width: 220px;
}

}

Span 类有一个默认属性 margin-left：20px。所以如果你把 .container ==> padding: 0 20px;它可能不适合。为此，您可以使 span3 类 margin-left 0 的第一个孩子即

.span3:first-child {
      margin-left: 0;
}

希望这会有所帮助。