Question

我正在创建一个网站，并使用boostrap-vue将导航栏添加到屏幕顶部。导航栏的右侧将包含一个标题为“ Lang”的下拉菜单。我希望“ Lang”文本为黑色。该文本当前为白色，我找不到更改它的方法。

我尝试了以下css代码，该代码更改了导航栏项目的颜色，但“ Lang”保持不变的白色/灰色。

.dropdown {
color: #000!important; 
}

.navbar-dark .navbar-nav .nav-link {
    color: #000!important;
}

这是我的导航栏的代码：

    <b-navbar class="w-50 mx-auto" toggleable="lg" type="dark" variant="info" :sticky="true" bg-foobar>
    <!--<b-navbar-brand href="#">NavBar</b-navbar-brand>-->
    <b-img :src="require('../assets/BlueLogoPNG.png')" class="logo"></b-img>

    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav class="ml-auto" >
        <b-nav-item href=""><b>Planet Pluto</b></b-nav-item>
        <b-nav-item href="#"><b>About Us</b></b-nav-item>
        <b-nav-item href=""><b>Support</b></b-nav-item>
        <b-nav-item href="#"><b>Credits</b></b-nav-item>
      </b-navbar-nav>

      <!-- Right aligned nav items-->
      <b-navbar-nav class="ml-auto">

        <b-nav-item-dropdown toggle-class="nav-link-custom" text="Lang" right>
          <b-dropdown-item href="#">EN</b-dropdown-item>
          <b-dropdown-item href="#">ES</b-dropdown-item>
          <b-dropdown-item href="#">RU</b-dropdown-item>
          <b-dropdown-item href="#">FA</b-dropdown-item>
        </b-nav-item-dropdown>

      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
    <BNav/>

  </div>

我可以通过.dropdown类控制背景颜色，但不能控制颜色。 Lang文本必须是颜色代码＃000。

devtools显示文本颜色是通过.navbar-dark .navbar-nav .nav-link类控制的。从Google chrome开发工具添加color：＃000！important会产生所需的结果。将此添加到源代码中将更改除我的下拉菜单以外的所有导航栏项目的颜色。

如何将Lang下拉菜单的文本颜色更改为黑色？

Answer 1

您可以使用deep selector

::v-deep .nav-link {
   color: #000!important;
}

仅对下拉菜单有更多限制

::v-deep .dropdown .nav-link {
   color: #000!important;
}

Answer 2

尝试使用varient属性

<b-dropdown-item varient="dark" href="#">EN</b-dropdown-item>

在bootstrap-vue中更改下拉菜单的文本颜色

2 个答案: