使用 bootstrap-vue 导航栏 item-dropdown 更改文本颜色

Posted 2023-02-16

【中文标题】使用 bootstrap-vue 导航栏 item-dropdown 更改文本颜色

【英文标题】：Change text colour with bootstrap-vue navbar item-dropdown

【发布时间】：2019-03-17 03:00:53

【问题描述】：

我正在使用Bootstrap-Vue 编写网页，但我无法更改Bootstrap navbar 上的文本颜色，尤其是b-nav-item-dropdown 标记。我曾尝试使用<span class="text-dark" 环绕b-nav-item-dropdown 标签，但没有奏效。 b-navbar 的变体似乎只能将文本颜色变体设置为深色或浅色。

这是我的代码：

<div>
  <b-navbar toggleable="md" type="dark" variant="primary">
  <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
  <b-collapse is-nav id="nav_collapse">
    <b-navbar-nav class="pl-5" inline>

      <b-nav-item-dropdown text="Electronics">
        <b-dropdown-item href="/">Item 1</b-dropdown-item>
        <b-dropdown-item href="/">Item 2</b-dropdown-item>
        <b-dropdown-item href="/">Item 3</b-dropdown-item>
        <b-dropdown-item href="/">Item 4</b-dropdown-item>
      </b-nav-item-dropdown>


      <b-nav-item-dropdown text="Sports">
        <b-dropdown-item href="/">Item 1</b-dropdown-item>
        <b-dropdown-item href="/">Item 2</b-dropdown-item>
        <b-dropdown-item href="/">Item 3</b-dropdown-item>
        <b-dropdown-item href="/">Item 4</b-dropdown-item>
      </b-nav-item-dropdown>

    </b-navbar-nav>
    <!--Login button-->
    <b-navbar-nav class="ml-auto pr-5">
      <b-button size="me">Login</b-button>
    </b-navbar-nav>

  </b-collapse>
</b-navbar>
</div>

我的目标是让b-nav-item-dropdown 中的所有文本变为黑色，而不是灰色。

【问题讨论】：

第 2 版中有一个基于 prop 的解决方案。我已经添加了答案。

【参考方案1】：

不要试图用额外的元素和类来包装你的组件，只需检查你的 DOM 并将规则应用于该元素并将其更改为自定义的。我遵循了这个过程，我将color 应用于b-nav-item-dropdown，即#ffffff80 应用于此选择器.navbar-dark .navbar-nav .nav-link，所以让我们将其更改为black，如下所示：

  <template>
  ...
 </template>
  <style>
   .navbar-dark .navbar-nav .nav-link
      color:black!important
    
 </style>

【参考方案2】：

在 toggle-class 属性中传递您的附加课程。例如：

<b-nav-item-dropdown toggle-class="text-dark" text="Electronics">

查看https://bootstrap-vue.js.org/docs/components/nav#dropdown-support 了解该组件支持的更多道具。