Изменение цвета текста с помощью bootstrap-Vue navbar item-выпадающий список

Изменение цвета текста с помощью bootstrap-Vue navbar item-выпадающий список

12.10.2018 02:06:50 Просмотров 12 Источник

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

У вопроса есть решение - Посмотреть?

Ответы - Изменение цвета текста с помощью bootstrap-Vue navbar item-выпадающий список / Change text colour with bootstrap-vue navbar item-dropdown

Является ответом!
Boussadjra Brahim

12.10.2018 03:23:14

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

17.08.2019 01:29:44

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

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

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

Закрыть X