Bootstrap 3 - non-responsive?

问题

I am using Bootstrap 3 in my WordPress theme. Most of the site will make use of the responsive features, but for a few pages that host data visualizations I would like to force a fixed width.

How would I set this non-responsivity up?

(Would be nice if there was some sort of body class (.non-responsive) that could take precedence over the responsive features?)

回答1:

There is a section in Bootstrap docs about disabling responsivness: http://getbootstrap.com/getting-started/#disable-responsive

Steps to disable responsive views
To disable responsive features, follow these steps.

1. Remove (or just don't add) the viewport <meta> mentioned in the CSS docs
2. Remove the max-width on the .container for all grid tiers with max-width: none !important; and set a regular width like width: 970px;. Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !important with media queries or some selector-fu.
3. If using navbars, undo all the navbar collapsing and expanding behavior (this is too much to show here, so peep the example).
4. For grid layouts, make use of .col-xs-* classes in addition to or in place of the medium/large ones. Don't worry, the extra-small device grid scales up to all resolutions, so you're set there. You'll still need Respond.js for IE8 (since our media queries are still there and need to be picked up). This just disables the "mobile site" of Bootstrap.

回答2:

What about this?

.non-responsive { width: 800px !important; }  //or whatever width you want it to be

来源：https://stackoverflow.com/questions/18302120/bootstrap-3-non-responsive