Bootstrap 3 - 无响应? [英] Bootstrap 3 - non-responsive?

问题描述

我在我的 WordPress 主题中使用 Bootstrap 3.大多数网站都会使用响应式功能，但对于一些承载数据可视化的页面，我想强制使用固定宽度.

如何设置这种无响应?

(如果有某种 body 类(.non-responsive)可以优先于响应特性，会很好吗?)

解决方案

Bootstrap 文档中有一节关于禁用响应:http://getbootstrap.com/getting-started/#disable-responsive><块引用>

禁用响应式视图的步骤
要禁用响应功能，按着这些次序.

1. 移除(或不添加)CSS 中提到的视口 文档
2. 删除所有网格层的 .container 上的 max-widthmax-width: none !important; 并设置一个像 width 这样的常规宽度:970px;.确保这是在默认 Bootstrap CSS 之后.你可以选择避免 !important 与媒体查询或一些选择器-fu.
3. 如果使用导航栏，请撤消所有导航栏折叠并扩展行为(这里展示的太多了，所以看看例子).
4. 对于网格布局，另外使用 .col-xs-* 类到或代替中/大.别担心，超小号设备网格可缩放到所有分辨率，因此您已设置好.你会IE8 仍然需要 Respond.js(因为我们的媒体查询仍然存在并且需要被捡起).这只是禁用了移动站点"引导程序.

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

解决方案

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.

这篇关于Bootstrap 3 - 无响应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！