bootstrap取消自适应的方法

这篇文章主要介绍了bootstrap取消自适应的方法，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

bootstrap取消自适应的方法：1、去掉头部“<meta name="viewport" content="width=device-width, initial-scale=1.0”>”；2、设置.container宽度即可。

禁用bootstrap响应式解决方法

前几天接到一个任务，用bootstrap框架写几个静态页面，由于长时间专注于后台开发，所以，花费了3天时间，才终于写完了页面，其中，来回的修改，把遇到的问题说一下。

用bootstarp做完页面后，组长当时又改变主意了，说不用bootstrap，或者禁用bootstrap响应式，没办法，只有禁用响应式，花费时间最短了，去bootstrap官网上看，禁用响应式的话，第一：去掉头部<meta name="viewport" content="width=device-width, initial-scale=1.0”>。第二：设置.container宽度，比如：

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

第三：采用.col-xs-（最小设备栅格类）的样式来代替.col-md-以及.col-lg-*。

但是，此时问题并没有结束。

现在给container一个固定宽度,白色背景的导航条宽度可以铺满浏览器，但是，随着屏幕变小，导航条白色背景就不能铺满浏览器变小后的宽度！还有就是我的轮播图也是要求铺满浏览器宽度，现在也变得居中显示了，心里想，早知道就不用bootstrap了，难道我现在还有重写页面？上网查了一下，没有找到解决方法，后来，灵机一动，我可以给body一个宽度啊，或者给导航条和轮播图分别也设置相同的宽度，这个时候的问题，就是，设置多少宽度合适啊？发现，不能这样做！

最后，用火狐调试代码的时候，无意之间发现了这个好东西，@media ，但是，我自己设置了，在浏览器上没反应，无语了，最后，花费了一点时间发现这个样式没写对。

所以，解决导航条和轮播图响应式问题的，第四点就是：

@media screen and (max-width: 1400px) {
body{
width: 1400px;
}
}

他的意思就是，当屏幕小于1400px的时候，把body宽度设置为1400px.不知道的读者可以上网学习一下，这可是一个好东西！

最后，说一下，top指的是position绝对定位时的top。关于对span设置宽度和高度是没有作用的，他不是块级元素，div是块级元素，span是行内元素。如果想用span实现下图中的按钮，只需要根据需要设置padding即可。(padding:20px 20px等)

感谢你能够认真阅读完这篇文章，希望小编分享bootstrap取消自适应的方法内容对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，遇到问题就找亿速云，详细的解决方法等着你来学习!