无法让我的 CSS 媒体查询与引导程序一起使用

Question

我正在使用 bootstrap v3.3.6，在我的一生中，我看不到如何覆盖默认媒体查询。我尝试了各种方法来克服这个问题，但我尝试的任何方法都不起作用。该查询甚至不会出现在 firebug 或 chrome developer 中。

据我所知，媒体查询的引导布局如下：

@media (max-width: 767px) {
  /* code goes here */
  }

但根据我为克服这一点所做的所有研究，媒体查询的布局如下：

@media screen and (max-width: 480px) {
    /* code goes here */
}

两个查询都应该有效吗？

我已经发布了我正在使用的代码，如果有人能帮助我克服这个问题，我将不胜感激。非常感谢

@media（最小宽度：320px）{

.navbar-brand {
    /*float: left;*/
    padding: 0;
    height: 50px;
    margin-left: -30px;
    margin-top: 5px;
    /*line-height: 20px;*/
    }
}

Answer 1

所以有两件事可能是问题的原因：

首先：bootstrap 使用比你更精确的选择器。例如。

.div .navbar-brand { code goes here;}

或者，如果您使用相同的选择器，则引导程序会在您的 CSS 之后加载并覆盖您的。

所以请确保稍后加载，您有相同或更精确的选择器，应该没问题。

如果你不能以任何一种方式修复它，你可以使用 !important，但这是相当糟糕的做法