twitter-bootstrap - 如何将 Twitter Bootstrap 3 用于非响应式网站？

Question

这个问题在这里已经有了答案:





How to remove responsive features in Twitter Bootstrap 3?

(8 个回答)


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.

如何禁用响应能力？我希望我的网站不会为平板电脑或移动设备重新排列。

Answer 1

更多解释程序见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.