宽度小于767像素时如何从DIV中删除左边界

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

您还可以通过将Javascript添加到<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;
    }
}

宽度小于767像素时如何从DIV中删除左边界

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-10-21 01:11:52

解决方案2
0 2015-10-21 01:11:34

宽度小于767像素时如何从DIV中删除左边界

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-10-21 01:11:52

解决方案2 0 2015-10-21 01:11:34

解决方案1
1 已采纳 2015-10-21 01:11:52

解决方案2
0 2015-10-21 01:11:34