媒体查询不适用于某些类的Bootstrap，但适用于其他类

dawn 发表于 Dev

103

黎明

我有媒体查询，但是由于某种原因，某个特定的班级无法正常工作。我正在为此使用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工具删除它）：

怎么了？

黎明

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。