html - 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 像素填充。

score 0 · Accepted Answer

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

@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;
}

希望这可以帮助。

1 回答 1