html - 我的媒体查询没有生效

Question

我在使用媒体查询时遇到了一些问题。这是一个非常基本的东西，但由于某种原因不起作用。

基本上，我在 div 标签周围有一个边框:

<div class="container games mobile">
    <div class="row">
        <div class="col-lg-8 div border"> 
<!-- This div tags are closed at the end of the file -->

我正在使用 Bootstrap ，老实说我不知道​​这是否是问题的一部分，但我想做的是在用户使用移动设备时删除该边框，为此，我添加了以下内容我的 css 文件中的行:

@media screen and (max-width: 600px) {
       .border {
        border: none;
    }
}

Border on computer

Border on mobile即使我使用了查询

(在两个打印件上都添加了一个灰色方 block ，因为内容实际上并不需要在此处，但可以找到实时预览 here)

问题是否与 parent > child 有关？

提前致谢!

Answer 1

它不工作，因为它被 Bootstrap 代码覆盖。试试这个:

@media (max-width: 600px) {
       .border {
        border: none !important;
    }
}