Bootstrap会终止我的媒体查询代码

Question

这是我的@media查询代码:

@media (max-width:1200px) { 
    html { background-color: red; } 
}

这段代码有效,但只有UNTIL我添加了Bootstrap CSS.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>  

当我添加bootstrap时,我的@media查询停止工作.

Answer 1

Bootstrap集(相当于):

body {
    background-color: white;
}

所以你可以将你的选择器更改为body没有任何问题:

@media (max-width:1200px) { 
    body {
        background-color: red;
    } 
}