禁止响应式布局,主要有以下几个步骤:
第一步:在响应式布局中,在html的head部分,会有这样一行代码:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
若要禁止响应式布局,则要将这行代码去掉。
第二步:通过为 .container 类设置一个 width 值从而覆盖框架的默认 width 设置,例如 width: 970px !important; 。请确保这些设置全部放在默认的 Bootstrap CSS 文件的后面。注意,如果你把它放到媒体查询中,也可以略去 !important 。
即在css文件中设置下面这样:

第三步:如果使用了导航条,需要移除所有导航条的折叠和展开行为。
第四步:于栅格布局,额外增加 .col-xs-* 类或替换掉 .col-md-* 和 .col-lg-*。 不要担心,针对超小屏幕设备的栅格系统能够在所有分辨率的环境下展开。
即将html文件中所有的<div class="col-sm-4 col-md-3 col-lg-2">全部都换成<div class="col-sm-4">这样固定的即可。
网友评论