Why is the Twitter Bootstrap "fixed" layout NOT fixed?

Question

The Twitter Bootstrap site reads as follows:

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

Quote from http://twitter.github.com/bootstrap/scaffolding.html#layouts

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

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

div.container{
  width:940px;
}

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

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

Answer 1

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

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

If you look at this file github responsive-1200px-min.less (2.0.4) or github responsive-1200px-min.less (2.1.0)

You can see that

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

Which gives 70*12 + 30*(12-1) = 1170px (12 being the @gridColumns).

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

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