Bootstrap禁用响应式布局

作者:Dolly - 2017-06-29

Bootstrap这个前端框架,在前端界可是一款大名鼎鼎的框架,使用Bootstrap不需要很强的设计能力就能设计出很漂亮的网页,这几天在开发一个创业项目,PC端web就打算使用Bootstrap来进行开发,但是又想去掉Bootstrap的响应式效果,于是乎就在网上找了教程,发现了网上的教程的效果好像不太适用了新版本,于是自己摸索了下,跟大家来一起分享下去掉Bootstrap响应式的几个步骤:

1.移除标签

禁用响应式布局的第一步买就是移除在head标签中添加的meta标签,如下所示:

<meta name="viewport" content="width=device-width, initial-scale=1.0”>

对这个标签做一个简单的解释,这个标签的作用在于使得你的网站在移动设备端访问的时候,不会进行缩放,而是以100%的比例显示在移动设备中。

2.设置container类的宽度

禁用的第二步是为.container类设置一个宽度,从而覆盖它根据设备宽度而自动调节的功能,网上找到的教程普遍只对container类设置一个宽度,这里我们给container设置一个最大宽度为none,并且全部设置为!important,保证能覆盖原来的Bootstrap样式,如下所示:

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

3.删除折叠菜单

倘若你采用了导航栏,那么就要注意删掉菜单在移动端的折叠样展开式(主要通过button的navbar-toggle来实现)。

除此之外,如果你采用了栅格布局,那么就要采用.col-xs-(最小设备栅格类)的样式来代替.col-md-以及.col-lg-*,这样就能确保栅格能够在所有设备中展开。

通过以上几个步骤,你便可以禁用自己项目中的响应式布局,还等什么?快试试吧!Bootstrap中文网链接:http://www.bootcss.com/