Bootstrap 3: How to set default grid to 960px widt

2019-03-10 00:08发布

问题:

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/)

  1. change @container-large-desktop from ((1140px + @grid-gutter-width)) to ((940px + @grid-gutter-width)).
  2. 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/