• 技术文章 >web前端 >Bootstrap教程

    bootstrap 如何取消自适应

    藏色散人藏色散人2020-11-30 11:56:25原创79

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

    本教程操作环境:windows10系统、bootstrap3.0,本文适用于所有品牌的电脑。

    推荐:《bootstrap视频教程

    禁用bootstrap响应式解决方法

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

    47dda48dcc06f6027bf0dcc4822415f.png

    用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 如何取消自适应的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:bootstrap
    上一篇:bootstrap tab 没有反应怎么办 下一篇:bootstrap 如何修改css样式
    第14期线上培训班

    相关文章推荐

    • 如何解决bootstrap乱码问题• bootstrap开源么• jquery easyui和bootstrap的区别是什么• html如何引用bootstrap

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网