2

Twitter Bootstrap 网站内容如下：

默认且简单的 940 像素宽、居中布局，适用于单个<div class="container">.

引用自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 的“固定”布局没有固定呢？我怎样才能修复它？

4

3 回答 3

6

更新

在较新版本的引导程序中，从 2.1.0（我认为）开始，您可以在 github 上的源代码variables.less中修改响应式网格大小

因此，如果您从 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）。

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

至于 RoR 等价物，任何输入都会受到赞赏。

于 2012-08-10T15:52:52.153 回答
2

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

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

正如您提到的，您正在使用 twitter-bootstrap-railsvendor/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的标准文件

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

于 2012-08-10T15:41:23.203 回答
0

我认为您错过了为引导程序固定的术语。当Bootstrap提及固定时，它们意味着它不会根据浏览器的大小重新调整内容的宽度，但 Fluid 会。

所以如果你改变了容器，你也应该改变row类的默认宽度。IE：.row { width: 940px; }

您可能也必须对其他课程这样做。Bootstrap在这里也提供了自定义页面

希望有帮助，

于 2012-08-10T15:51:48.970 回答