Question

我在这里有一个简单的人。我有一个使用bootstrap列的div：

<div class="current-plan col-sm-4 col-xs-12">
</div>

当前计划的CSS：

.current-plan{
   margin-left: 5%;
   display: inline-block;
   background-color: #000;
   height: 150px;
}

当屏幕宽度低于767px时，我希望剩下的5％边距消失。

我尝试过使用@media查询，但似乎并没有与它进行互动。

div也嵌套在Bootstraps容器div中：

<div class="container">
   <div class="current-plan col-sm-4 col-xs-12">
   </div>
</div>

Answer 1

尝试添加!important声明：

@media screen and (max-width: 766px) {
    .current-plan{
    margin-left: 0px !important;
    }
}

您也可以在<body>：

中添加Javascript

<script>
var mq = window.matchMedia( "(max-width: 766px)" );
if (mq.matches) {
   var el = document.getElementsByClassName("current-plan");
   for(var i = 0; i < el.length; i++) {
      elems[i].style.marginLeft = "0px";
   }
}
</script>

或直接在Bootstrap CSS中编辑样式。

Answer 2

为当前计划添加更多选择器：

@media (max-width: 767px) {
    .container .current-plan {
        margin-left: 0 !important;
    }
}

如何在低于767px宽度时从DIV中移除左边距

2 个答案: