我希望我的导航栏有一个黑色的背景沿着它的整个长度，像这样:https://i.stack.imgur.com/NNkqy.png我不想把我的链接或者我的logo移到那里，这样它就会保持在原来的位置上，而只是在它的长度上设置一个背景
第二个SASS编译问题:我给它应用了一个新颜色(我不想要它的灰色:我像这样定义#141414:https://i.stack.imgur.com/kvTru.png告诉它我不想要灰色-900而是#141414然而它编译正确，但不改变我的颜色怎么办
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<title>Kurium Client</title>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="container bg-dark">
<nav class="navbar navbar-expand-md navbar-dark">
<a class="navbar-brand" href="#">
<img src="logo.svg" alt="Bootstrap" width="200" height="30" class="d-inline-block align-top">
<span class="hidden">Kurium Client</span>
</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#toggleMobileMenu"
aria-controls="toggleMobileMenu"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="toggleMobileMenu">
<ul class="navbar-nav ms-auto text-center">
<li>
<a class="nav-link" href="#">Forums</a>
</li>
<li>
<a class="nav-link" href="#">Features</a>
</li>
<li>
<a class="nav-link" href="#">Purchase</a>
</li>
<li>
<a class="nav-link" href="#">Media</a>
</li>
<li>
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="container">
<a href="#" class="btn btn-dark">Learn more</a>
<a href="#" class="btn btn-dark">Buy Now</a>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
-->
</body>
</html>第一:您正在使用来自竞争交付网络的bootstrap.css。您还没有引用自己的自定义css。所以你不会看到你的变化。
但是，与其替换颜色变量，不如在主题颜色中添加另一种颜色。
Bootstrap内部遍历地图中的所有颜色，并生成相应的组件变体，如navbar-dark, navbar-primary等。
根据https://getbootstrap.com/docs/5.0/customize/sass/add-to-map
你可以在地图中定义你的自定义颜色
// Create your own map
$custom-colors: (
"customgray": #141414
);
然后将自定义颜色地图与$theme-colors地图合并，例如
$theme-colors: map-merge($theme-colors, $custom-colors);
但是要注意不能只导入整个bootstrap。你必须自己导入所有的部件。
需要//
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// Consider putting these lines wihtin a _custom.scss in your project
// and importing it here
$custom-colors: (
"customgray": #141414
);
$theme-colors: map-merge($theme-colors, $custom-colors);
// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...
这样你就可以使用
<nav class="navbar navbar-expand-md navbar-customgray">
请不要使用!important，因为!important是一个很好的指示，表明它对"开发人员"很重要。退出项目。
你总是可以通过添加类和编写新规则来专门化(在覆盖方面)你的CSS，而不是使用重要的