Bootstrap+SCSS导航链接激活时动画下划线消失问题求助

DevOps 小满

2026-8-9

解决Bootstrap侧边栏导航Active状态下划线不显示的问题

问题根源在于你定义的%underline-link占位符中，下划线伪元素默认是隐藏且缩放为0的状态，仅在hover时触发显示，但active状态未单独设置该伪元素的显示规则。以下是两种直接有效的解决方式：

方法一：为Active状态单独设置伪元素样式

修改.sidebar .nav-pills .nav-link.active的规则，直接强制其下划线伪元素显示：

.sidebar .nav-pills .nav-link.active,
.sidebar .nav-pills .show > .nav-link {
    @extend %underline-link;
    background: linear-gradient(120deg, darken($sidebar-navitem-background-color, 2) 65%, darken($sidebar-navitem-background-color, 2) 65%);

    // 新增：强制显示下划线
    &:before {
        visibility: visible;
        transform: scaleX(1);
    }
}

方法二：扩展占位符的状态规则

在%underline-link中直接加入对.active类的支持，让所有继承该占位符的元素，只要带有.active类就自动显示下划线：

%underline-link {
    color: $underline-link-color;
    position: relative;
    text-decoration: none;
    transition: all 0.4s ease;

    &:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 3px;
        bottom: 0px;
        left: 0;
        background: $underline-link-color;
        visibility: hidden;
        transform: scaleX(0);
        transform-origin: center left;
        transition: all 0.3s ease 0s;
    }

    &:hover,
    &.active { // 新增active状态支持
        transition: all 0.4s ease;

        &:before {
            visibility: visible;
            transform: scaleX(1);
        }
    }
}