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;
    } 
}