[英]Overriding Bootstrap @media (min-width: 768px) using CSS not working
On the navigation on my website, I am using bootstrap and for my active page, I am trying to add a horizontal line below it. 在我网站的导航上,我正在使用引导程序,对于活动页面,我试图在其下方添加一条水平线。
For the navigation, Bootstrap has set the padding to 对于导航,Bootstrap已将填充设置为
@media (min-width: 768px)
navbar.less:286
.navbar-nav>li>a {
padding-top: 15px;
padding-bottom: 15px;
}
I am using border-bottom to act as the horizontal line below to show the active page, but i dont want it to show 15px below the page title. 我正在使用border-bottom作为下面的水平线来显示活动页面,但是我不希望它在页面标题下显示15px。
So I inseted this code into my custom.css file: 因此,我将此代码插入了custom.css文件:
.activeNavPage {
border-bottom: solid 1px rgb(255, 95, 0);
padding-bottom: 10px;
margin-bottom: 4px;
}
As well as: 以及:
@media (min-width: 768px)
navbar.less:286
.navbar-nav>li>a {
padding-top: 15px;
padding-bottom: 10px;
}
To try and override the existing boostrap CSS, yet my @media query does nothing and my .activeNavPage CSS only apples style for the border and the margin, but it does not override the padding neither. 为了尝试覆盖现有的boostrap CSS,我的@media查询不执行任何操作,而.activeNavPage CSS仅针对边框和边距设置了苹果样式,但也没有覆盖填充。
Try adding !important. 尝试添加!important。 Such as padding-left:10px !important;
如padding-left:10px!important;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.