如何修改Bootstrap 5.1中active类导航链接的颜色？

我的React项目中导航栏代码如下：

<nav className="navbar navbar-expand-lg ps-3 pe-3 ps-sm-5 pe-sm-5">
  <Link className="navbar-brand fw-bold" to={ "/"}><span className='text-white'>E</span> <span className='navbar-text'>Gyülekezet</span></Link>
  <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span className="navbar-toggler-icon"></span>
  </button>
  <div className="collapse navbar-collapse" id="navbarNav">
    <ul className="navbar-nav">
      <li className="nav-item">
        <Link to={ "/"} className="nav-link p-0 m-2"> Isten hozott!
        </Link>
      </li>
      <li className="nav-item">
        <Link to={ "/about"} className="nav-link p-0 m-2"> Rólunk
        </Link>
      </li>
    </ul>
  </div>
</nav>

我尝试了以下调整Bootstrap激活链接样式的方法，但均无效：

• 修改Bootstrap激活状态颜色
• 更改Bootstrap CSS中的激活链接颜色
• 调整Bootstrap标签页的激活颜色

解决方案 #

1. 确保激活链接自动添加active类

你使用的是React Router的Link组件，它不会自动为当前路由的链接添加active类，而Bootstrap的激活样式依赖这个类。需要改用NavLink组件，并通过回调动态设置类名：

// 先导入NavLink
import { NavLink } from 'react-router-dom';

// 替换原有的Link
<NavLink 
  to="/" 
  className={({ isActive }) => `nav-link p-0 m-2 ${isActive ? 'active' : ''}`}
>
  Isten hozott!
</NavLink>
<NavLink 
  to="/about" 
  className={({ isActive }) => `nav-link p-0 m-2 ${isActive ? 'active' : ''}`}
>
  Rólunk
</NavLink>

2. 自定义CSS覆盖Bootstrap默认样式

添加优先级更高的CSS规则来覆盖Bootstrap的默认激活样式：

.navbar-nav .nav-link.active {
  color: #ff4500 !important; /* 替换为你需要的颜色 */
  font-weight: 700; /* 可选：添加加粗效果 */
  border-bottom: 2px solid #ff4500; /* 可选：添加底部下划线标识激活状态 */
}

注意：如果仍不生效，检查CSS文件的引入顺序，确保自定义CSS在Bootstrap CSS之后加载，这样才能覆盖默认样式。

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