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

Question

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

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

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

这似乎对其余的布局工作得很好，但是当我缩小并检查网站的1200px时，一切都会到位。我以为我能够解决这个问题：

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

.container {
    padding: 0 20px;
}}

但是，然后，该布局中的其余跨度仍然是默认的固定宽度，并且由于容器比以前小，所以它们彼此相差较小。它没有调整，w / c不会发生在流体网格系统中（顺利调整）。

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

Answer 1

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

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

.span3 {
  width: 220px;
}

}

Span类的默认属性为margin-left：20px。所以如果你把.container ==＆gt;填充：0 20px;它可能不合适。为此，您可以创建span3类margin-left 0的第一个子项，即

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

希望这有帮助。