提问者:小点点

b-nav-item的bootstrap-vue问题,不能改变颜色


如果我把这段代码放到https://bootstrap-vue.js.org/play的playground的模板部分,我就不能让我的'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>

并且它不会对标记着色,而是将类添加到

  • 中。

    我需要它来生成这个HTML

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

    而是不知道如何操作bootstrap-vue代码以这种方式创建它。


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

    匿名用户

    有一个特殊的道具link-,您可以将其添加到b-nav-item组件:

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