css - 在 bootstrap-vue 中更改下拉菜单的文本颜色
问题描述
我正在创建一个网站并使用 boostrap-vue 在屏幕顶部添加一个导航栏。导航栏的右侧将包含一个名为“Lang”的下拉菜单。我希望“Lang”文本为黑色。文本当前是白色的,我找不到更改它的方法。
我尝试了以下 css 代码来更改导航栏项目的颜色,但“Lang”保持相同的白色/灰色。
.dropdown {
color: #000!important;
}
.navbar-dark .navbar-nav .nav-link {
color: #000!important;
}
这是我的导航栏的代码:
<b-navbar class="w-50 mx-auto" toggleable="lg" type="dark" variant="info" :sticky="true" bg-foobar>
<!--<b-navbar-brand href="#">NavBar</b-navbar-brand>-->
<b-img :src="require('../assets/BlueLogoPNG.png')" class="logo"></b-img>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav class="ml-auto" >
<b-nav-item href=""><b>Planet Pluto</b></b-nav-item>
<b-nav-item href="#"><b>About Us</b></b-nav-item>
<b-nav-item href=""><b>Support</b></b-nav-item>
<b-nav-item href="#"><b>Credits</b></b-nav-item>
</b-navbar-nav>
<!-- Right aligned nav items-->
<b-navbar-nav class="ml-auto">
<b-nav-item-dropdown toggle-class="nav-link-custom" text="Lang" right>
<b-dropdown-item href="#">EN</b-dropdown-item>
<b-dropdown-item href="#">ES</b-dropdown-item>
<b-dropdown-item href="#">RU</b-dropdown-item>
<b-dropdown-item href="#">FA</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-collapse>
</b-navbar>
<BNav/>
</div>
我可以通过 .dropdown 类控制背景颜色,但不能控制颜色。Lang 文本需要是颜色代码#000。
devtools 显示文本颜色是通过 .navbar-dark .navbar-nav .nav-link 类控制的。从 google chrome 开发工具中添加 color:#000!important 会产生所需的结果。将此添加到源代码将更改所有导航栏项目的颜色,但我的下拉列表除外。
如何将我的 Lang 下拉菜单的文本颜色更改为黑色?
解决方案
您可以使用深度选择器
::v-deep .nav-link {
color: #000!important;
}
仅对下拉菜单有更多限制
::v-deep .dropdown .nav-link {
color: #000!important;
}
推荐阅读
- python - python-更新日志内容时动态更改日志目录
- javascript - 使用参数类型 U 的 T 获取类型 T 的函数的参数类型
- java - 两次调用返回静态对象的静态方法时只调用一次构造函数?
- visual-studio-code - 更新 OmniSharp 扩展
- django-templates - 我们可以在 Django 框架的 scriptlet 中使用多个呈现的查询集和多个 for 循环吗?
- javascript - 切换按钮打印双精度值
- json - SQLSTATE [42S22]:找不到列:1054 'where 子句'中的未知列'deposits.Country'
- java - ufw 阻止来自我的 java 应用程序的所有连接
- reactjs - 延迟调用useEffect导致组件模型不一致
- matlab - mp3和wav中频域的区别?