即使在viewport＆lt;最大宽度媒体查询

Question

我正在开发一个网站，我无法编辑标记，只能通过CSS进行修改。

我在使用某些媒体查询时遇到了问题。

该网站是在Bootstrap中构建的，并且一些自定义代码非常混乱，因此可能有一些媒体查询干扰我没有注意到。

然而，我不明白的是，尽管视口位于media query

的范围内，但我的一些风格似乎被忽略了

以下是我所指的元素：

<ul class="nav navbar-nav pull-right">

我已在以下媒体查询中添加了自己的CSS：

@media (max-width: 991px) {

    .navbar-nav {
        margin-top: 20px;
        width: 100%;
    }

}

所以我的理解是，如果视口的宽度不超过991px，我的样式应该在该元素上可见。

但是，仅当视口大于768px时才有效。我首先想到的可能是样式被覆盖了，但是在Firefox中使用Inspect工具时，样式似乎完全被忽略了。

如果我的视口设置为768px或更宽，我的Inspector看起来像这样：

但是如果我的视口小于那个，那么我在Inspector中看不到.navbar-nav元素

的任何内容

我错过了什么吗？媒体查询不能以这种方式运作吗？

Answer 1

我发现导致问题的原因是，以下未封闭的媒体查询在原始开发者的CSS中进一步隐藏起来：

@media only screen and (min-width: 768px) {