为什么Twitter Bootstrap“固定”布局没有修复？

Question

Twitter Bootstrap网站内容如下：

对于由单个<div class="container">提供的几乎任何网站或页面，默认和简单的940px宽，居中布局。

引自http://twitter.github.com/bootstrap/scaffolding.html#layouts

这正是我在HTML中所拥有的，但当我检查元素时，我看到这个CSS适用于它：

.container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
    width: 1170px;
}

顺便说一句，如果我通过添加...来覆盖CSS规则

div.container{
  width:940px;
}

然后div.container中的元素比div.container本身更宽，看起来不合适。

那么，为什么Twitter Bootstrap“固定”布局不固定？ 以及如何修复它？

Answer 1

更新

在更新版本的bootstrap中，从2.1.0开始（我认为）你可以在variables.less修改响应式网格大小： 源代码在github上

因此，如果您从Less编译CSS，则可以修改这些变量。 否则，以下解决方案仍然有效。

---

这是因为您包含了响应式布局。 检查文档

如果你看看这个文件github responsive-1200px-min.less（2.0.4）或github responsive-1200px-min.less（2.1.0）

你可以看到

 @gridColumnWidth: 70px; // First parameter @gridGutterWidth: 30px; // Second parameter 

其中70*12 + 30*(12-1) = 1170px （12为@gridColumns ）。

因此，如果您需要静态，无响应，940px宽的网格，则必须从包含中删除bootstrap-reponsive.css文件。

至于RoR等价物，任何输入都是值得赞赏的。

Answer 2

你确定你有Twitter Bootstrap的最新版本吗？ 我的bootstrap.css说（第197行）：

.container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
    width: 940px;
}

如你所说，你正在使用twitter-bootstrap-rails vendor/toolkit/twitter/bootstrap/variables.less状态：

// Default 940px grid
// -------------------------
@gridColumns:             12;
@gridColumnWidth:         60px;
@gridGutterWidth:         20px;
@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

这是标准文件，直接来自https://github.com/seyhunak/twitter-bootstrap-rails

你可能正在使用它的其他版本？

Answer 3

我想你错过理解为bootstrap固定的术语。 当Bootstrap提到固定时，它们意味着它不会根据浏览器的大小重新调整内容的宽度，但Fluid会。

因此，如果更改容器，还应更改row类的默认宽度。 即： .row { width: 940px; } .row { width: 940px; }

您可能还必须与其他课程一起这样做。 Bootstrap还在此处提供自定义页面

希望有所帮助，