b-nav-item의 부트스트랩-vue 문제, 색상을 변경할 수 없음

b-nav-item의 부트스트랩-vue 문제, 색상을 변경할 수 없음

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>

bootstrap-vue 코드를 조작하여 이렇게 작성하는 방법을 모릅니다.

텍스트는 다음과 같이 정리할 수 있습니다.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>

b-nav-item 구성 요소에 추가할 수 있도록 특수 소품 링크 클래스가 있습니다.

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

언급URL : https://stackoverflow.com/questions/52616423/bootstrap-vue-issue-with-b-nav-item-cant-change-color