b-nav-item 的 Bootstrap-vue 问题,无法更改颜色

Posted

技术标签:

【中文标题】b-nav-item 的 Bootstrap-vue 问题,无法更改颜色【英文标题】:Bootstrap-vue issue with b-nav-item, can't change color 【发布时间】:2019-03-08 01:22:45 【问题描述】:

如果我将此代码放入操场的模板部分 https://bootstrap-vue.js.org/play, 我无法将我的“A Number Here (1)”文本变为红色。有什么方法可以为一个 b-nav-item 的文本着色,使其与其他的不一样?

<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>

它不会为&lt;a&gt; 标签着色,而是将类添加到&lt;li&gt;

我需要它来生成这个 HTML

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

相反,但不知道如何操纵 bootstrap-vue 代码以这种方式创建它。

【问题讨论】:

【参考方案1】:

有一个特殊的道具 link-classes 所以你可以将它添加到你的 b-nav-item 组件中:

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

【讨论】:

【参考方案2】:

您可以使用 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 的 Bootstrap-vue 问题,无法更改颜色的主要内容,如果未能解决你的问题,请参考以下文章

Vuetify中的BootstrapVue b-form-checkbox&radio垂直中心?

使用 BootstrapVue 以编程方式编写导航链接的正确方法

Router Link 只更新活动类一次

在组件内使用列表项 - Vue2

Bootstrap-vue 将 svg 图像显示为导航项?

关于光的反射和折射的例子?