使用CSS无法正常覆盖Bootstrap @media（min-width：768px）

Question

在我网站上的导航中，我正在使用bootstrap，而对于我的活动页面，我正在尝试在其下方添加一条水平线。

对于导航，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只有边框和边距的苹果样式，但它也没有覆盖填充。

Answer 1

尝试添加！important。如padding-left：10px！important;