可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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>

回答1:

.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

回答2:

I know this is already answered, but since I'm bookmarking it, I want to give the solution that worked for me when theming Bootsrap using Sass and NPM.

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.scss like this:

@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 file and copy over the ones you want to overwrite.

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.scss file after the changes would like like this:

@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:

This way I don't overwrite CSS rules avoiding unnecessary clutter.

回答3:

In Bootstrap v4.3.1 I simply copy the CSS path from 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:

/*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: