css - 无法让我的 css 媒体查询与 Bootstrap 一起使用

Question

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

据我所知，bootstrap 布局有这样的媒体查询:

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

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

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

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