【问题标题】:My media query is not taking effect我的媒体查询没有生效
【发布时间】:2018-04-03 20:02:12
【问题描述】:

我在使用媒体查询时遇到了一些问题。这是一个非常基本的事情,但由于某种原因无法正常工作。

基本上,我在 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 -->

我正在使用引导程序,但我真的不知道这是否是问题的一部分,但我想做的是在用户使用手机时删除该边框,为此,我添加了以下内容我的css文件中的行:

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

Border on computer

Border on mobile 即使我使用了查询

(在两个打印件上都添加了一个灰色方块,因为内容并不需要在这里,但可以找到实时预览here

问题可能与父母>孩子有关吗?

提前致谢!

【问题讨论】:

    标签: html twitter-bootstrap css


    【解决方案1】:

    它不起作用,因为它被引导代码覆盖。试试这个:

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

    【讨论】:

    • 我几乎可以肯定引导程序中没有边界类,这就是为什么我什至不费心检查 *sigh 的原因。谢谢!
    • 有时最好避免使用 !importatant,因为可以使用正常的层次结构来处理事情。
    • 没问题!我同意,尽可能避免使用!important。为了解决您的问题,我们将提供快速修复,但理想情况下您不想使用它。
    【解决方案2】:

    在此处使用css specificity,而不是使用!important。为什么不!important

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

    【讨论】:

    • 我不知道 css 的特殊性。打算看看它,并尝试在未来使用它!如果我在 xD 之前知道这一点,我本可以解决我的许多问题
    • 这就是为什么添加链接的原因,请随意花时间。
    猜你喜欢
    • 2019-01-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-05-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多