Question

我正在使用bootstrap v3.3.6，在我的生活中，我看不到如何覆盖默认的媒体查询。我已经尝试了各种方法来克服这一点，但我尝试的任何工作都没有。查询甚至没有出现在firebug或chrome开发人员中。

从我所看到的，引导布局就像那样的媒体查询：

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

但是，在我试图克服这一点的所有研究中，媒体查询的布局如下：

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

两个查询都应该有效吗？

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

@media（min-width：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，但那是相当不好的练习

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

1 个答案: