twitter-bootstrap – 如何使用Twitter Bootstrap 3的非响应网站？

参见英文答案 > How to remove responsive features in Twitter Bootstrap 3?8个答案正如你可以在他们的页面上阅读，新的 Bootstrap 3是“移动优先”：

With Bootstrap 2,we added optional mobile friendly styles for key
aspects of the framework. With Bootstrap 3,we’ve rewritten the
project to be mobile friendly from the start. Instead of adding on
optional mobile styles,they’re baked right into the core. In
fact,Bootstrap is mobile first. Mobile first styles can be found
throughout the entire library instead of in separate files.

如何禁用响应性？我希望我的网站不会重新排列自己的平板电脑或手机。

解决方法

有关更多解释的过程，请参见 How to use Twitter Bootstrap 3 for non-responsive site

从Bootstrap documentation(加上一些解释)：

To disable responsive features,follow these steps. See it in action
in the modified template below.

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.

添加此样式：

.container{
  max-width: none !important;
  width: 970px;
}

3) If using navbars,undo all the navbar collapsing and expanding
behavior (this is too much to show here,so peep the example).

打开variables.less并设置变量：

@ grid-float-breakpoint为0

@ screen-xs-max为0(这将是固定的;读here)

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.