引導程序媒體查詢覆蓋未按預期工作

Question

我是一個相對較新的引導程序，並盡我所能加快速度。 我理解，不是編輯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文件指定的寬度在767px和992px之間。

@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 */
}