css - 仅当两个类都在使用时才应用样式(媒体查询/ bootstrap )

即使我的浏览器已调整大小以使用sm样式，此文本对齐也适用于它-尽管告诉浏览器将其应用于md-3而不是sm

换句话说，我希望仅在媒体查询将我的设备解释为sm屏幕时才能应用样式。我下面的样式适用于所有尺寸-甚至md。我如何解决它？

我的CSS：

div.col-md-3.subnav{
    text-align: center;
}

和HTML：

<div class="col-xs-12 col-sm-6 col-md-3 subnav">Pricing</div>

最佳答案

之所以应用它，是因为div上有一个类subnav定义了text-align: center，而与当前尺寸无关。

您需要为您的特定对齐方式添加媒体查询规则：

@media (min-width: 768px) {
    .subnav {
        text-align: center;
    }
}