Изменить цвет текста с помощью выпадающего меню начальной загрузки bootstrap-vue - PullRequest
Новая
       15

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

0 голосов
/ 12 октября 2018

Я использую 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 ]

0 голосов
/ 17 августа 2019

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

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

См. https://bootstrap -vue.js.org / docs / components / nav # dropdown-support для получения дополнительной информации о поддержке этого компонента.

0 голосов
/ 12 октября 2018

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