使用bootstrap-vue导航栏项下拉菜单更改文本颜色 [英] Change text colour with bootstrap-vue navbar item-dropdown

问题描述

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

I am using Bootstrap-Vue to write a web page, but I have trouble changing the text colors on the Bootstrap navbar, especially the b-nav-item-dropdown tag. I have tried using <span class="text-dark" to wrap around the b-nav-item-dropdown tag but that did not work. It appeared that the variant of the b-navbar can only set the text color variants to either dark or light.

这是我的代码:

<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中的所有文本更改为黑色，而不是灰色.

My goal is to get all the text in b-nav-item-dropdown to change to black instead of the grey-ash color.

推荐答案

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

Don't try to wrap your components with extra elements and classes, just inspect your DOM and get the rule applied to that element and change it to a custom one. i had followed that process and i get the color applied to b-nav-item-dropdown which is #ffffff80 applied to this selector .navbar-dark .navbar-nav .nav-link, So let's change it to black as follow :

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

这篇关于使用bootstrap-vue导航栏项下拉菜单更改文本颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！