Проблема начальной загрузки с b-nav-item, не может изменить цвет - PullRequest
Новая
       9

Проблема начальной загрузки с b-nav-item, не может изменить цвет

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

Если я добавлю этот код в часть шаблона на детской площадке по адресу https://bootstrap -vue.js.org / play , я не смогу получить текст «A Number Here (1)» красным,Есть ли способ закрасить текст одного b-nav-элемента, чтобы он не совпадал с другими? 

<b-navbar toggleable="md" type="dark" variant="dark">
    <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
    <b-collapse is-nav id="nav_collapse">
        <b-navbar-nav>
            <b-nav-item href="#">Nav Item 1</b-nav-item>
            <b-nav-item href="#">Nav Item 2</b-nav-item>
            <b-nav-item href="#">Nav Item 3</b-nav-item>
        </b-navbar-nav>
        <b-navbar-nav class="ml-auto">
            <b-nav-item href="#" class="text-danger">A Number Here (1)</b-nav-item>
            <b-nav-item-dropdown text="Nav Item 5" right>
                <b-dropdown-item href="#">Dropdown 1</b-dropdown-item>
                <b-dropdown-item href="#">Dropdown 2</b-dropdown-item>
                 <b-dropdown-item href="#">Dropdown 3</b-dropdown-item>
              <b-dropdown-item href="#">Dropdown 4</b-dropdown-item> 
            </b-nav-item-dropdown>
            <b-nav-item-dropdown text="Nav Item 6" right>
                <b-dropdown-item href="#">Dropdown 1</b-dropdown-item>
            </b-nav-item-dropdown>
        </b-navbar-nav>
    </b-collapse>
</b-navbar>

Полученный выше HTML-код, созданный сверху, равен 

<li class="nav-item text-danger">
    <a href="#" target="_self" class="nav-link">A Number Here (1)</a>
</li>

и он не будет окрашивать тег <a>, он добавляет класс к <li>.

Мне нужно, чтобы он привел вместо этого HTML 

<li class="nav-item">
    <a href="#" target="_self" class="nav-link text-danger">A Number Here (1)</a>
</li>

, но незнать, как манипулировать кодом начальной загрузки, чтобы создать его таким образом.

1 Ответ

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

Вы можете заключить текст в тег span с классом text-danger следующим образом: 

<b-nav-item href="#"  ><span class="text-danger">A Number Here (1)</span></b-nav-item>

Результат HTML будет выглядеть так: 

 <li class="nav-item"><a href="#" target="_self" class="nav-link"><span style="" class="text-danger">A Number Here (1)</span></a></li>
...