Bootstrap 5 导航栏答案

【问题标题】：Bootstrap 5 navigation barBootstrap 5 导航栏
【发布时间】：2021-11-09 11:49:05
【问题描述】：

我希望我的导航栏在其整个长度上具有黑色背景，如下所示：https://i.imgur.com/5aqMM98.png 我不想将我的链接或徽标移动到那里，以使其保持原位，而只是在其长度上设置一个背景

第二个 SASS 编译问题：我对其应用了新颜色（我不想要它的灰色：我这样定义 #141414：https://i.imgur.com/LvMU20j.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>

【问题讨论】：

使用浏览器的开发工具检查工具查看设置背景颜色的确切位置。它似乎是由带有 !important 的引导程序设置的。
它是在紧身连衣裤上定义的，但我认为它不合逻辑，所以如果我按逻辑定义它，它将把整个紧身连衣裤放在黑色背景中，这不是我真正想要的，因为在这件紧身衣裤中我我会把其他我不需要的东西放在黑色背景中i.imgur.com/XQbj2v7.png

标签： html css navbar bootstrap-5

【解决方案1】：

首先：您正在使用来自竞争交付网络的 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);

但请注意，您不能只导入整个引导程序。您必须自己导入所有部分。

// 必填

@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

【讨论】：

对我想要定义的颜色而不是灰色的修改我在 style.scss 中说我想要的，而在 index.css 中我这样做：i.imgur.com/KIW26Tu.png 否？为了继续我会测试谢谢你的解释我承认我暂时不了解所有内容，但我会通过旁边的研究来加深
我真的推荐阅读 Bootstrap 文档中的“自定义”部分：getbootstrap.com/docs/5.0/customize/overview
我导入了我的 style.css，我像这样重新编译了我的 sass：i.imgur.com/1QOR7uz.png 但我仍然看不到颜色有任何变化