zoukankan      html  css  js  c++  java
  • 解决引用bootstrap样式时遇到的冲突问题

    1、引用bootdtrap.css时遇到的样式冲突问题:

    因为html渲染的时候是自上而下的,后面的样式会覆盖前面的样式。

    所以如果你的css样式不能覆盖bootstrap的样式,检查一下是不是自己的样式的引入放在了bootstrap的引入前面。

    正确的是把自己的样式引入放在bootstrap的引入后面。

    比如:

     <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="mine.css"> //这是我的

    2、如何禁用bootstrap的响应:

    PC端web就打算使用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: 1200px !important;

     max-width: none !important;

    }

    3.删除折叠菜单
    倘若你采用了导航栏,那么就要注意删掉菜单在移动端的折叠样展开式(主要通过button的navbar-toggle来实现)。
    4.栅栏布局
    除此之外,如果你采用了栅格布局,那么就要采用.col-xs-(最小设备栅格类)的样式来代替.col-md-以及.col-lg-*,这样就能确保栅格能够在所有设备中展开。

  • 相关阅读:
    BZOJ 1041: [HAOI2008]圆上的整点
    BZOJ 1040: [ZJOI2008]骑士
    BZOJ 1037: [ZJOI2008]生日聚会Party
    BZOJ 1034: [ZJOI2008]泡泡堂BNB
    BZOJ 1032: [JSOI2007]祖码Zuma
    BZOJ 1031: [JSOI2007]字符加密Cipher
    BZOJ 1030: [JSOI2007]文本生成器
    Flink学习(三) 批流版本的wordcount Scala版本
    Flink学习(三) 批流版本的wordcount JAVA版本
    Flink学习(二) 应用场景和架构模型
  • 原文地址:https://www.cnblogs.com/wolflower/p/9401458.html
Copyright © 2011-2022 走看看