Измените цвет текста с помощью раскрывающегося списка элементов навигационной панели bootstrap-vue

Я использую 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 стал черным, а не серо-пепельным.


javascript vue.js css vuejs2 bootstrap-vue
person Duncan Hui    schedule 11.10.2018    source источник
comment
В версии 2 есть решение на основе пропеллеров. Я добавил ответ.   -  person inopinatus    schedule 17.08.2019

Ответы (2)


arrow_upward
4
arrow_downward

Не пытайтесь обернуть свои компоненты дополнительными элементами и классами, просто проверьте свою 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>
person Boussadjra Brahim    schedule 12.10.2018

arrow_upward
4
arrow_downward

Передайте свой дополнительный класс в toggle-class prop. Например:

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

См. https://bootstrap-vue.js.org/docs/components/nav#dropdown-support, чтобы узнать о дополнительных возможностях, поддерживаемых этим компонентом.

person inopinatus    schedule 17.08.2019