Bootstrap 4导航栏激活元素高亮增强方法咨询

当然有办法解决这个问题！Bootstrap 4默认的.active导航链接样式确实比较低调，咱们可以通过自定义CSS或者结合内置工具类来让激活项更醒目，下面是几个实用方案：

方案1：自定义CSS强化激活样式 #

最灵活的方式就是直接覆盖Bootstrap的默认样式，给激活项添加更明显的视觉特征，比如更粗的字体、高亮颜色、下划线或者背景色。你可以在项目的样式文件中添加这段代码：

/* 用更具体的选择器确保优先级高于Bootstrap默认样式 */
.navbar .nav-link.active {
    font-weight: 700; /* 比默认加粗更明显的权重 */
    color: #007bff; /* 高亮的主题蓝色 */
    border-bottom: 2px solid #007bff; /* 底部添加醒目下划线 */
    background-color: rgba(0, 123, 255, 0.1); /* 浅淡背景色增强区分度 */
}

如果需要更夸张的效果，还可以加上圆角、阴影：

.navbar .nav-link.active {
    font-weight: 700;
    color: #fff !important;
    background-color: #007bff;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

方案2：结合Bootstrap内置工具类快速加粗 #

如果你只需要强化加粗效果，可以直接用Bootstrap内置的font-weight-bold（或font-weight-bolder）工具类，修改你现有的Laravel代码即可：

<li class="nav navbar-nav ">
    <a class="nav-link {{ Request::is('/') ? "active font-weight-bold" : "" }}" href="#">Home</a>
    <a class="nav-link " href="#">Other Page</a>
</li>

这种方式不需要额外写CSS，适合快速调整。

小提示：样式优先级问题 #

如果你的自定义样式没生效，大概率是优先级不够。可以用更具体的选择器（比如.navbar .nav-link.active）替代单独的.nav-link.active，这样就不需要用!important来强制覆盖，更符合CSS规范。

内容的提问来源于stack exchange，提问作者Naishu Babu