如何更改Bootstrap 4下拉菜单的颜色？

Question

如何更改Bootstrap 4下拉菜单的颜色？

13

我正在尝试更改Bootstrap 4下拉导航菜单的背景和字体颜色。我尝试使用：

.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;
}

但是这对我来说效果不太好。这是我的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>

- Temple

3个回答

19

.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>

这里是一些代码，希望能对你有所帮助。

已编辑

现在它正常工作了。

- Nirav Joshi

嘿，伙计，实际上我正在使用Bootstrap 4，我应该澄清一下。这很好，但它不适用于版本4。 - Temple

@Temple 请检查使用Bootstrap 4是否正常工作，您应该正确覆盖CSS否则它将无法工作。另外，您是否使用了tether.js？ - Nirav Joshi

1

在Bootstrap v4.3.1中，我只需从浏览器的开发者工具中复制CSS路径，并将其添加到我的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;
}

结果应该长这样：

- Ashraf Sada

我正在使用 确切的 Bootstrap 版本 4.3.1，但对于我的导航项下拉菜单，它并不起作用。但还是谢谢你的分享 :-) - Locohost

你可能需要删除 div. 或者根据你构建菜单的方式，将 div. 替换为 a. 或 ul.。 - lafual

由于新的Bootstrap版本4的更改，我只想提醒大家需要做的就是选择活动选择器，并使用完全限定的顺序，就像答案中所示，这不是div或你使用哪个元素的问题，而只是知道合格的选择器。 - Ashraf Sada

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jolvera · Accepted Answer

我知道这个问题已经有答案了，但是因为我要收藏它，所以我想分享一下当使用Sass和NPM 主题化Bootstrap 时对我有用的解决方案。

请注意，我在我的自定义函数和变量之上包含了其他函数和变量，因为我需要访问它们，否则编译会失败。在这个问题中阅读更多信息。

假设你的 _custom.scss 文件像这样：

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";

// Add your custom variables here

@import "~bootstrap/scss/bootstrap";

然后你可以前往Bootstrap的主要变量文件并复制你想要覆盖的那些变量。

例如，如果我想让下拉菜单背景为黑色并带有白色链接，就可以这样做：

$dropdown-bg:                       $dark;
$dropdown-link-color:               $light;

修改后的_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";

这是编译Sass后的图像：

这样我就不会覆盖CSS规则，避免不必要的混乱。