在引导程序中折叠时如何更改下拉导航栏中的字体颜色？

在引导程序中，下拉导航栏非常常见。它可以用于显示网站的主要导航菜单或其他常用操作。在折叠状态下，导航栏中的菜单项以及下拉菜单中的内容都被隐藏，只有一个带有下拉箭头的按钮。当用户单击该按钮时，下拉菜单将展开并显示所有菜单项和内容。

在默认情况下，Bootstrap 导航栏的下拉菜单中的字体颜色与其他文本相同，可能会让用户感到困惑。但是，您可以使用 Bootstrap 提供的工具轻松更改下拉菜单中的字体颜色。

更改下拉菜单中的链接字体颜色

可以使用 dropdown-item 类来定义下拉菜单中的链接样式。通过添加 text-* 类，可以更改链接的颜色。例如，使用 text-success 类可以将链接颜色更改为绿色， 使用 text-danger 类可以将链接颜色更改为红色。

以下是一个例子：

<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
  <a class="dropdown-item text-success" href="#">Action</a>
  <a class="dropdown-item text-danger" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
</div>

在上面的代码中，下拉菜单中的第一个链接的颜色被更改为绿色，第二个链接的颜色被更改为红色。第三个链接的颜色保留默认颜色。

更改下拉菜单中的文本颜色

除了链接颜色之外，可以使用 text-* 类更改下拉菜单中的文本颜色。下面是一个例子：

<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item text-info" href="#">Separated link</a>
</div>

在上面的代码中，下拉菜单中的分隔符和链接的颜色都被更改为蓝色。

总结

通过使用 Bootstrap 的 text-* 类，您可以轻松更改下拉菜单中的链接和文本的颜色。这使得下拉菜单更加易于使用，并可以帮助用户更清晰地了解他们可以执行的操作。