[英]Change text colour with bootstrap-vue navbar item-dropdown
I am using Bootstrap-Vue
to write a web page, but I have trouble changing the text colors on the Bootstrap navbar
, especially the b-nav-item-dropdown
tag.我正在使用
Bootstrap-Vue
编写网页,但我无法更改Bootstrap navbar
上的文本颜色,尤其是b-nav-item-dropdown
标签。 I have tried using <span class="text-dark"
to wrap around the b-nav-item-dropdown
tag but that did not work.我曾尝试使用
<span class="text-dark"
来环绕b-nav-item-dropdown
标签,但这不起作用。 It appeared that the variant of the b-navbar
can only set the text color variants to either dark or light. b-navbar
的变体似乎只能将文本颜色变体设置为深色或浅色。
Here is my code:这是我的代码:
<div>
<b-navbar toggleable="md" type="dark" variant="primary">
<b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
<b-collapse is-nav id="nav_collapse">
<b-navbar-nav class="pl-5" inline>
<b-nav-item-dropdown text="Electronics">
<b-dropdown-item href="/">Item 1</b-dropdown-item>
<b-dropdown-item href="/">Item 2</b-dropdown-item>
<b-dropdown-item href="/">Item 3</b-dropdown-item>
<b-dropdown-item href="/">Item 4</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item-dropdown text="Sports">
<b-dropdown-item href="/">Item 1</b-dropdown-item>
<b-dropdown-item href="/">Item 2</b-dropdown-item>
<b-dropdown-item href="/">Item 3</b-dropdown-item>
<b-dropdown-item href="/">Item 4</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
<!--Login button-->
<b-navbar-nav class="ml-auto pr-5">
<b-button size="me">Login</b-button>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</div>
My goal is to get all the text in b-nav-item-dropdown
to change to black instead of the grey-ash color.我的目标是让
b-nav-item-dropdown
所有文本都变成黑色而不是灰色。
Don't try to wrap your components with extra elements and classes, just inspect your DOM and get the rule applied to that element and change it to a custom one.不要试图用额外的元素和类来包装你的组件,只需检查你的 DOM 并将规则应用于该元素并将其更改为自定义规则。 i had followed that process and i get the
color
applied to b-nav-item-dropdown
which is #ffffff80
applied to this selector .navbar-dark .navbar-nav .nav-link
, So let's change it to black
as follow :我遵循了这个过程,我得到了应用于
b-nav-item-dropdown
的color
,即#ffffff80
应用于此选择器.navbar-dark .navbar-nav .nav-link
,所以让我们将其更改为black
,如下所示:
<template>
...
</template>
<style>
.navbar-dark .navbar-nav .nav-link{
color:black!important
}
</style>
Pass your additional class in the toggle-class
prop.在
toggle-class
道具中传递您的附加课程。 For example:例如:
<b-nav-item-dropdown toggle-class="text-dark" text="Electronics">
See https://bootstrap-vue.js.org/docs/components/nav#dropdown-support for more props this component supports.有关此组件支持的更多道具,请参阅https://bootstrap-vue.js.org/docs/components/nav#dropdown-support 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.