如何更改 bootstrap 4 下拉颜色? [英] How to change bootstrap 4 drop-down colors?
本文介绍了如何更改 bootstrap 4 下拉颜色?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试更改 bootstrap 4 下拉导航的背景和字体颜色.
我尝试使用
.nav.nav-tabs >li.dropdown.active.open >一个，.nav.nav-tabs >li.dropdown.active.open >ul.dropdown-menu a:hover,.nav.nav-tabs >li.dropdown.open >一个，.nav.nav-tabs >li.dropdown.open >ul.dropdown-menu a:hover{颜色:#fff;背景颜色:#b91773；边框颜色:#fff;}但这对我来说效果不佳.这是我的 HTML:
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"咏叹调扩展=假">下拉链接</a><div class="下拉菜单" aria-labelledby="navbarDropdownMenuLink"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">另一个动作</a><a class="dropdown-item" href="#">这里还有别的东西</a> 解决方案
.dropdown {list-style: none;背景:绿色；填充:10px；显示:内联块；}.dropdown .nav-link {color:#fff;文字装饰:无；}.dropdown .dropdown-menu a{color: #000;文字装饰:无；}.dropdown .btn {背景:绿色；颜色:#fff;}.dropdown .btn:hover {背景:青色；颜色:#000;}.dropdown .btn:active {背景:青色；颜色:#000;}.dropdown .btn:focus {背景:青色；颜色:#000;}.dropdown-menu .dropdown-item {display: inline-block;宽度:100%；填充:10px 5px;}.container .dropdown .dropdown-menu a:hover{颜色:#fff;背景颜色:#b91773；边框颜色:#fff;}<头><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script><身体><div class="容器"><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"咏叹调扩展=假">下拉链接</a><div class="下拉菜单" aria-labelledby="navbarDropdownMenuLink"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">另一个动作</a><a class="dropdown-item" href="#">这里还有别的东西</a></html>
这是一些代码，希望对您有所帮助.
已编辑
现在一切正常
I am trying to change both the background, and font color of the bootstrap 4 dropdown navigation.
I tried to use
.nav.nav-tabs > li.dropdown.active.open > a,
.nav.nav-tabs > li.dropdown.active.open > ul.dropdown-menu a:hover,
.nav.nav-tabs > li.dropdown.open > a,
.nav.nav-tabs > li.dropdown.open > ul.dropdown-menu a:hover
{
color: #fff;
background-color: #b91773;
border-color: #fff;
}
But this wasn't working too well for me. Here is my HTML:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
解决方案
.dropdown {list-style: none; background: green; padding: 10px; display: inline-block;}
.dropdown .nav-link {color:#fff; text-decoration: none;}
.dropdown .dropdown-menu a{color: #000; text-decoration: none;}
.dropdown .btn {background: green; color:#fff;}
.dropdown .btn:hover {background: cyan; color:#000;}
.dropdown .btn:active {background: cyan; color:#000;}
.dropdown .btn:focus {background: cyan; color:#000;}
.dropdown-menu .dropdown-item {display: inline-block; width: 100%; padding: 10px 5px;}
.container .dropdown .dropdown-menu a:hover
{
color: #fff;
background-color: #b91773;
border-color: #fff;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</div>
</body>
</html>
Here is a some code, hope it will helps you.
Edited
It is working fine now
这篇关于如何更改 bootstrap 4 下拉颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
