Bootstrap-b-nav-item 的 vue 问题,无法改变颜色
Bootstrap-vue issue with b-nav-item, can't change color
如果我将此代码放入 playground 的模板部分
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>
它不会为 <a>
标记着色,它会将 class 添加到 <li>
。
我需要它来实现这个 HTML
<li class="nav-item">
<a href="#" target="_self" class="nav-link text-danger">A Number Here (1)</a>
</li>
相反,但不知道如何操作 bootstrap-vue 代码以这种方式创建它。
您可以使用带有 text-danger
class 的 span
标签来包装您的文本,如下所示:
<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>
如果我将此代码放入 playground 的模板部分 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>
它不会为 <a>
标记着色,它会将 class 添加到 <li>
。
我需要它来实现这个 HTML
<li class="nav-item">
<a href="#" target="_self" class="nav-link text-danger">A Number Here (1)</a>
</li>
相反,但不知道如何操作 bootstrap-vue 代码以这种方式创建它。
您可以使用带有 text-danger
class 的 span
标签来包装您的文本,如下所示:
<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>