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

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">.

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?

Solution

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

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.