解决引用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-*，这样就能确保栅格能够在所有设备中展开。