Html 引导媒体查询不会占用所有css

好的，我在我的一个网站上使用Bootstrap3。 一切都很好，但是@media查询在为较小的设备定义一些css时出现了一些问题

因此，我已经包含了所有必要的引导文件（首先是引导css，然后是我自己的js，…）

在我的css中，例如：

@media (max-width: 768px) {
    .md-only {
        display:none;
    }
    .item-left {
        padding:0px;
    }
}
.item-left {
    padding:10px;
}

因此，现在发生的情况是，当我在html中添加

class=“md only”

时，div（例如）不会显示在<768px的设备上。但是，带有

class=“item left”

的div仍然使用

padding:10px

而不是@media查询中定义的

padding:0px

。所以它只需要一个css类，而不是其他的

---

我不明白我做错了什么…

问题在于规则的顺序

尝试将

.item left

放在

@media

之前

.item left{padding:10px；}
@媒体屏幕和（最大宽度：768px）{
.md only{显示：无；}
.item左{填充：0px；}
}

qweqwe

确保您没有覆盖您的样式。正如您在示例中所看到的，您在前面的媒体查询中定义了class.item后，再次添加了该类，从而使其过时

。项目左侧{
填充：10px；
}
@介质（最大宽度：768px）{
仅限医学博士{
显示：无；
}
.项目剩余{
填充：0px；
}
}

就这么简单！非常感谢。如果级联中的最后一个规则具有相同的特定性，则它们将覆盖以前的规则。