![](/img/trans.png)
[英]why @media only screen and (min-width: 768px) also apply for screen width less than 768px
[英]Overriding Bootstrap @media (min-width: 768px) using CSS not working
在我网站的导航上,我正在使用引导程序,对于活动页面,我试图在其下方添加一条水平线。
对于导航,Bootstrap已将填充设置为
@media (min-width: 768px)
navbar.less:286
.navbar-nav>li>a {
padding-top: 15px;
padding-bottom: 15px;
}
我正在使用border-bottom作为下面的水平线来显示活动页面,但是我不希望它在页面标题下显示15px。
因此,我将此代码插入了custom.css文件:
.activeNavPage {
border-bottom: solid 1px rgb(255, 95, 0);
padding-bottom: 10px;
margin-bottom: 4px;
}
以及:
@media (min-width: 768px)
navbar.less:286
.navbar-nav>li>a {
padding-top: 15px;
padding-bottom: 10px;
}
为了尝试覆盖现有的boostrap CSS,我的@media查询不执行任何操作,而.activeNavPage CSS仅针对边框和边距设置了苹果样式,但也没有覆盖填充。
尝试添加!important。 如padding-left:10px!important;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.