Question

好的，所以我在我的一个网站上使用Bootstrap 3。一切都很好，但@media查询为小型设备定义一些css有问题。

所以我已经包含了所有必要的bootstrap文件（首先是bootstrap css＆amp;然后是我自己的，js，...）

在我的CSS中我有例如：

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

所以现在发生的是，当我在我的html中添加class="md-only"时，div（例如）不会显示在设备上＆lt; 768px。但是，class="item-left"的div仍然使用{@ 1}}而不是@media查询中定义的padding:10px。所以它需要一个css类，但不是其余的。

我不知道我做错了什么......

Answer 1

问题在于规则的顺序。

尝试将.item-left放在@media之前。

＆＃13;

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

＆＃13;

<div class="md-only"></div>
<div class="item-left">qweqwe</div>

＆＃13;

Answer 2

确保您没有覆盖您的样式。正如您在示例中所看到的那样，您之前在媒体查询中定义了第二次类.item-left，从而使其过时。

＆＃13;

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

＆＃13;

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

2 个答案: