html - 引导布局:默认网格系统VS流体网格系统

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

但是，在引导模板的默认网格系统中（.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的宽度仍为270px。因此，当我将四个.span3 div放在一起时，总计为1080px。但这不可能，因为我只需要940px的宽度和两侧填充20px即可。

最佳答案

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

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

.span3 {
  width: 220px;
}

}

跨度类的默认属性为margin-left：20px。因此，如果您放置.container ==> padding：0 20px;它可能不适合。为此，您可以将span3类的第一个孩子设为margin-left 0，即

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

希望这可以帮助。

关于html - 引导布局:默认网格系统VS流体网格系统，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17033915/