Bootstrap 3: How to set default grid to 960px width?

问题

I'm working with Bootstrap 3 and the client wants the website container width to be set to 960px. Do I directly edit the CSS file or what is the best way to do this? I heard something about "Less". Do I customize the download? Thanks!

Update: the site does NOT need to be responsive, so I can disable that responsive-ness and just add the 960px width to the CSS and be done with it or does this cause problems elsewhere?

回答1:

For Bootstrap3, you can customize it to get 960px by default (http://getbootstrap.com/customize/)

change @container-large-desktop from ((1140px + @grid-gutter-width)) to ((940px + @grid-gutter-width)).
change @grid-gutter-width from 30px to 20px.

then download your custom version of bootstrap and use it. It should be 960px by default now.

回答2:

I wanted the max width to be 810px, so I used a media query like this:

@media (min-width: 811px) {    
    .container{
        width:810px;
    }
}

回答3:

Bootstraps gridsystem is FLUID. This means it works in percentages.

So just set a width to page wrapper, and you are ready to go

HTML:

<body>
    <div class="page-wrapper">
        <!-- Your bootstrap grid/page markup here -->
    </div>
</body>

CSS:

.page-wrapper {
    width: 960px; /* Your page width */
    margin: 0 auto; /* To center your page within the body */
}

回答4:

The easiest way is to wrap everything in a container like this..

.container-fixed {
  margin: 0 auto;
  max-width: 960px;
}

http://bootply.com/94943

Or, you can go with LESS/custom build: http://getbootstrap.com/customize/

来源：https://stackoverflow.com/questions/20057380/bootstrap-3-how-to-set-default-grid-to-960px-width

标签

less

twitter-bootstrap-3