b-nav-item 的引导 vue 问题，无法更改颜色

Question

如果我把这段代码放到操场的模板部分 https://bootstrap-vue.js.org/play， 我无法将"此处的数字(1("文本设置为红色。 有没有办法为一个b导航项的文本着色，使其与其他项不同？

<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 代码以这种方式创建它。

Answer 1

你可以用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>

Answer 2

有一个特殊的道具链接类所以你可以把它添加到你的b-nav-item组件中：

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