媒體查詢不適用於某些類的Bootstrap，但適用於其他類

Question

我有媒體查詢，但是由於某種原因，一個特定的類無法正常工作。 我為此使用Bootstrap模態。 我需要它在420寬度下效果最好。

這是我的CSS代碼：

@media (min-width: 768px) { 
    .caracs{
    width: 500px !important;
    font-family: 'Poppins', sans-serif;
    } 
    .panel{
    text-align: center;
    height: 255px;
    }
    .nombre-datos{
        display: inline-block;
        font-size: 0.8em;
        text-align: justify;
    }
}
@media (min-width: 992px) { 
    .caracs{
        width: 810px !important;
        font-family: 'Poppins', sans-serif;
    }
    .nombre-datos{
        display: inline-block;
        font-size: 0.8em;
        text-align: justify;
    }

}
@media (min-width: 1200px) { 
    .caracs{
    width: 810px !important;
    font-family: 'Poppins', sans-serif;
    }
    .panel{
        text-align: center;
        height: 165px;
    }
}

我特別需要：

.nombre-datos{
    display: inline-block; /*Necesario para que los divs estén en el mismo renglón*/
    width: 250px !important;
    font-size: 0.8em;
    text-align: justify;
}

改變。 我想在小屏幕上刪除寬度：250px！important屬性，當我在瀏覽器中調整窗口大小時，它根本不起作用。

這是一些照片：

這是在普通屏幕視圖上的外觀：

這是它對小型設備的響應：

這是我希望它看起來的樣子，刪除指定的屬性（我正在使用Firefox inspector / dev工具刪除它）：

怎么了？

Answer 1

Okai，我不完全確定發生了什么，但是這樣做：

意思是，將查詢從min更改為max，並使用！important強制執行某些操作， 而又不會弄亂其他任何內容。

 @media (max-width: 992px) { 
    .caracs{
        /*width: 810px !important;*/
        font-family: 'Poppins', sans-serif;
    }
    .nombre-datos{
        width: 364px !important;
        display: inline-block;
        font-size: 0.8em;
        text-align: justify;
    }
}