一部のクラスでブートストラップで動作しないメディアクエリがありますが、それ以外の場合は

Question

メディアクエリがありますが、何らかの理由で特定のクラスが動作しません。私はこれにBootstrapモーダルを使用しています。私はこれを420幅で一番うまく動作させるために必要とします。

@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; 
} 

を変更するには

は、ここに私のCSSコードです。私はの幅を削除したい：250px！important小さな画面では、私はブラウザでウィンドウのサイズを変更すると、全く動作しません。ここで

はいくつかの写真です：

これは、それが通常の画面表示にどのように見えるかです：ここでは

は、それが小型デバイスに応じてどのように見えるかです：

ここで私はそれを見て、指定されたプロパティを削除する方法です（私はFirefoxのインスペクタ/ devも使用していますそれを削除するには、LS）：

何が起こっていますか？

Answer 1

岡井、私は何が起こっているのか完全にはよく分からないが、これやって：

意味を、分に最大からクエリを変更し、で強制的に重要ないくつかのものはなしトリックをしました！他の何かを混乱させる。

@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; 
    } 
}