Bootstrap如何禁止响应式布局

Bootstrap 会自动帮你针对不一样的屏幕尺寸调整你的页面,使其在各个尺寸的屏幕上表现良好。下面咱们列出了如何禁用这一特性,就像这个非响应式布局实例页面同样。css

禁止响应式布局有以下几步:

  1. 移除 此 CSS 文档中提到的设置浏览器视口(viewport)的标签:<meta>
  2. 经过为 .container 类设置一个 width 值从而覆盖框架的默认 width 设置,例如 width: 970px !important; 。请确保这些设置所有放在默认的 Bootstrap CSS 文件的后面。注意,若是你把它放到媒体查询中,也能够略去!important 。
  3. 若是使用了导航条,须要移除全部导航条的折叠和展开行为。
  4. 对于栅格布局,额外增长 .col-xs-* 类或替换掉 .col-md-* 和 .col-lg-*。 不要担忧,针对超小屏幕设备的栅格系统可以在全部分辨率的环境下展开。

针对 IE8 仍然须要额外引入 Respond.js 文件(因为仍然利用了浏览器对媒体查询(media query)的支持,所以还须要作处理)。这样就禁用了 Bootstrap 对移动设备的响应式支持。浏览器

相关文章
相关标签/搜索