宽度小于767像素时如何从DIV中删除左边界
[英]How to remove left margin from DIV when below 767px width
问题描述
I have a simple one for someone here. 
我这里有一个简单的人。 I have a div that uses the bootstrap columns : 我有一个使用bootstrap列的div：
<div class="current-plan col-sm-4 col-xs-12">
</div>
The CSS for current-plan : 当前计划的CSS：
.current-plan{
margin-left: 5%;
display: inline-block;
background-color: #000;
height: 150px;
}
I want the 5% margin left to disappear when the screen goes below 767px width. 我希望当屏幕低于767px宽度时剩下的5％余量消失。
I've tried using @media queries but it doesn't seem to be interacting with it. 我尝试使用@media查询，但似乎没有与之交互。
The div is also nested inside of Bootstraps container div : div也嵌套在Bootstraps容器div中：
<div class="container">
<div class="current-plan col-sm-4 col-xs-12">
</div>
</div>
2 个解决方案
解决方案1
1 已采纳 2015-10-21 01:11:52
Try to add !important declaration : 尝试添加!important声明：
@media screen and (max-width: 766px) {
.current-plan{
margin-left: 0px !important;
}
}
You can also use Javascript by adding this inside your <body> : 您还可以通过将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>
Or edit styles directly in Bootstrap CSS. 或直接在Bootstrap CSS中编辑样式。
解决方案2
0 2015-10-21 01:11:34
Add more selectors to current-plan: 向当前计划添加更多选择器：
@media (max-width: 767px) {
.container .current-plan {
margin-left: 0 !important;
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.