Html 如何更改 bootstrap 4 下拉颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44612813/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change bootstrap 4 drop-down colors?
提问by Temple
I am trying to change both the background, and font color of the bootstrap 4 dropdown navigation.
我正在尝试更改 bootstrap 4 下拉导航的背景和字体颜色。
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:
但这对我来说效果不太好。这是我的 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>
回答by jolvera
I know this is already answered, but since I'm bookmarking it, I want to give the solution that worked for me when theming Bootsrapusing Sass and NPM.
我知道这已经得到了回答，但是由于我正在为它添加书签，因此我想在使用 Sass 和 NPM 对Bootsrap进行主题化时提供对我有用的解决方案。
Note that I include functions and variables above my custom ones because I need to access them otherwise the compilation will fail. Read more about it on this issue.
请注意，我在自定义函数和变量之上包含了函数和变量，因为我需要访问它们，否则编译将失败。阅读有关此问题的更多信息。
Suppose you have your _custom.scsslike this:
假设你有_custom.scss这样的：
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
// Add your custom variables here
@import "~bootstrap/scss/bootstrap";
Then you can go to Bootstrap's main variables fileand copy over the ones you want to overwrite.
然后，您可以转到Bootstrap 的主变量文件并复制要覆盖的变量。
For example, if I want my dropdown background to be dark with white links I'd do it like:
例如，如果我希望我的下拉背景变暗并带有白色链接，我会这样做：
$dropdown-bg: $dark;
$dropdown-link-color: $light;
And my _custom.scssfile after the changes would like like this:
_custom.scss更改后我的文件如下所示：
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
// Add your custom variables here
$dropdown-bg: $dark;
$dropdown-link-color: $light;
@import "~bootstrap/scss/bootstrap";
And this is an image of what it looks like after compiling Sass:
这是编译 Sass 后的图像：
This way I don't overwrite CSS rules avoiding unnecessary clutter.
这样我就不会覆盖 CSS 规则，避免不必要的混乱。
回答by Nirav Joshi
.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
现在工作正常
回答by Ashraf Abusada
In Bootstrap v4.3.1I simply copy the CSS pathfrom the browser developer tools, and add it to my Website.css, and add to it some styles to much the look and feel of the website I am building:
在Bootstrap v4.3.1我简单地CSS path从浏览器复制developer tools，并将其添加到我的Website.css，并添加一些样式，以增加我正在构建的网站的外观和感觉：
/*drop-down override*/
div.btn-group.show div.dropdown-menu.show {
background-color: #4b4b4b;
}
div.btn-group.show div.dropdown-menu.show button.dropdown-item {
color: #e1e1e1;
}
div.btn-group.show div.dropdown-menu.show div.dropdown-divider {
border-top: 1px solid rgba(50, 50, 50, 0.9);
}
div.btn-group.show div.dropdown-menu.show button.dropdown-item:hover,
div.btn-group.show div.dropdown-menu.show button.dropdown-item:focus {
background-color: #1e1e1e;
color: #f0f0f0;
}
The result should look like this:
结果应如下所示：
