html - Bootstrap 媒体查询覆盖未按预期工作

Question

我对 bootstrap 还比较陌生，我正在尽最大努力跟上速度。我知道与其编辑那个 6700 行的 bootstrap.css 文件，不如创建自己的 css 更改文件并将其放在主 bootstrap.css 文件下，覆盖主文件中的内容。

但是，我对媒体查询有疑问。例如，我希望菜单以比 bootstrap.css 中指定的分辨率更大的分辨率折叠，其中包括如下内容:

@media (min-width: 767px) {
[ lots of things to collapse the menu ]
}

所以在我更改的 css 文件中，我复制了相同的代码，但将最小宽度更改为 992px。问题是这并没有取消 bootstrap.css 文件中的指令。它只是以不同的分辨率再次处理它们。

我唯一能想到的解决方法是从原始文件中复制该代码，将最小宽度分辨率保留为 767，然后针对整个代码块中的每条指令，确定默认属性应该是什么是并将其设置回那个。这将是一项繁重的工作，而且很容易出错。

我唯一的解决办法是编辑主 bootstrap.css 文件并注释掉该代码。我不喜欢编辑它，但我看不到任何其他解决方法。还有别的办法吗？我不是在寻求有关折叠菜单的专门帮助。我更想寻找 CSS 概念方面的帮助。

Answer 1

如果您真的想覆盖 Bootstrap 样式，您还必须覆盖 Bootstrap CSS 文件指定的宽度介于 767 像素和 992 像素之间的内容。

@media (min-width: 767px) and (max-width: 991px){
    /* Undo here what was specified by Bootstrap file for screens larger than 767px and you don't want to apply */
}