html - 如何更改 bootstrap 4 下拉颜色？

Question

我正在尝试更改 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>

Answer 1

我知道这已经得到解答，但由于我将其添加为书签，所以我想提供在 theming Bootsrap 时对我有用的解决方案使用 Sass 和 NPM。

请注意，我在自定义函数和变量之上包含函数和变量，因为我需要访问它们，否则编译将失败。 Read more about it on this issue .

假设您的 _custom.scss 是这样的:

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

// Add your custom variables here

@import "~bootstrap/scss/bootstrap";

然后你可以去Bootstrap's main variables file并复制您要覆盖的内容。

例如，如果我希望我的下拉菜单背景为黑色并带有白色链接，我会这样做:

$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 规则，避免不必要的困惑。