为什么Twitter Bootstrap是“固定的"?布局不固定? [英] Why is the Twitter Bootstrap "fixed" layout NOT fixed?

问题描述

Twitter Bootstrap网站的内容如下:

The Twitter Bootstrap site reads as follows:

几乎所有类型的默认且简单的940像素宽的居中布局 由单个<div class="container">提供的网站或页面.

The default and simple 940px-wide, centered layout for just about any website or page provided by a single <div class="container">.

从 http://twitter.github.com/bootstrap/scaffolding.html#引用布局

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

That's exactly what I have in my HTML but when I inspect the element, I see this CSS apply to it:

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

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

By the way, if I override that CSS rule by adding...

div.container{
  width:940px;
}

然后div.container内部的元素比div.container本身宽，并且看起来不合适.

Then the elements inside the div.container are wider than the div.container itself and look out of place.

那么，为什么不固定Twitter Bootstrap的固定"布局?以及如何解决?

So, why is the Twitter Bootstrap "fixed" layout NOT fixed? and how can I make it fixed?

推荐答案

更新

在较新版本的bootstrap中，自2.1.0起(我认为)，您可以在variables.less中修改响应网格的大小:

Update

In newer version of bootstrap, since 2.1.0 (I think) you can modify the responsive grid sizes in variables.less : source on github

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

So if you are compiling your CSS from Less, you can modify those variables. Otherwise, the solution below is still valid.

---

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

---

This is because you included the responsive layout. Check the doc

如果您查看此文件 github sensitive-1200px-min.less(2.0.4)或你可以看到

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

哪个给出70*12 + 30*(12-1) = 1170px(12是@gridColumns).

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

So if you want the static, non-responsive, 940px wide grid, you have to remove the bootstrap-reponsive.css file from your includes.

对于等效的RoR，任何输入都是值得的.

As for the RoR equivalent of that, any input is appreciated.

这篇关于为什么Twitter Bootstrap是“固定的"?布局不固定?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！