如何在Bootstrap中更改活动nav-item的字体颜色？

在Bootstrap中，活动的nav-item通常由颜色区别于其他nav-item。默认情况下，这种颜色被称为活动颜色，在Bootstrap中，它默认为蓝色。

为了更改活动nav-item的字体颜色，我们需要对CSS进行一些调整。下面是具体的步骤：

步骤1：添加自定义CSS

为了更改活动nav-item的字体颜色，我们首先需要添加自定义CSS。在HTML文件中，我们需要像下面这样添加一个<style>元素：

<style>
    .nav-link.active {
        color: red !important;
    }
</style>

上述CSS代码将更改活动nav-item的字体颜色为红色。在这个例子中，我们使用!important来覆盖Bootstrap的默认样式。

步骤2：添加class

接下来，我们需要为nav-item添加一个class。在这个例子中，我们将class命名为active-link。以下是一个示例导航栏：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Brand</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item active-link">
                    <a class="nav-link active" aria-current="page" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

在上述代码中，我们将active-linkclass添加到Aboutnav-item中。

完成！

现在，活动nav-item的字体颜色已经被更改为红色了。通过修改上述CSS中的颜色，您可以更改活动颜色，从而更改活动nav-item的字体颜色。