Bootstraps 5.0 汉堡菜单答案

【问题标题】：Bootstraps 5.0 burger menuBootstraps 5.0 汉堡菜单
【发布时间】：2021-05-01 09:18:42
【问题描述】：

我正在使用引导程序，但我不知道为什么我的汉堡菜单不会显示。这不是我第一次使用这个框架，所以我认为我的安装很好，我的样式表链接在我的脑海中，我的 JavaScript 和 popper 的单独脚本以正确的顺序在我的正文末尾，正如引导程序所推荐的那样。

我多次将我的代码与引导程序示例以及我之前所做的工作进行比较，哪个汉堡菜单有效，但我仍然找不到我的错误。

我没有任何错误消息，当我使用 devtools 时，我可以在此处看到它，但没有“激活”：https://prnt.sc/xppsdv

 <head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,900&display=swap"
      rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<link rel="shortcut icon" href="#">
<?php wp_head(); ?>

 <div class="wrap-header">

            <nav id="mainnav" class="navbar navbar-expand-md">

                <?php
                if ($the_query->have_posts()) {
                while ($the_query->have_posts()) {
                $the_query->the_post();
                $img1 = get_the_post_thumbnail_url(get_the_ID(), 'logo_nav'); ?>
                <a class="navbar-brand" href="<?= esc_url(home_url('/'))?>">
                    <img class="nav-logo" src="<?php echo $img1; ?>"
                         alt="logo navigation">
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                    <span class="navbar-toggler-icon">ICI</span>
                </button>

                <div class="collapse navbar-collapse text-center" id="collapsibleNavbar">
                    <ul id="onglets" class="navbar-nav ml-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="les-solutions">Les solutions</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="nos-offres">Nos offres</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="contact-demo">Contact & Démo</a>
                        </li>
                        <li class="nav-item">
                            <div class="h-line"></div>
                        </li>
                        <li class="nav-item">
                            <?php
                            $img2 = get_field('image_2', get_the_ID()); ?>
                           <img class="image2" src="<?php echo $img2['sizes']['logo_nav2']; ?>" alt="">
                            <?php }}

                            wp_reset_postdata(); ?>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="">Inscription</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="">Connexion</a>
                        </li>
                </div>
            </nav>

    </div>

</header>

我更改了“data-bs”中的“data”属性，谢谢。我没有使用任何 scss 文件，而是通过他们在网站上提供的链接导入引导程序：

头：我分享顶部的代码
页脚：https://prnt.sc/xrjixp

这是我检查“跨度”时的结果，没有任何 SVG 内容的迹象https://prnt.sc/xriath

我尝试使用另一个导航栏示例并且它有效，因此我添加了一些按钮中没有的代码，例如：aria-expanded="false" aria-label="Toggle navigation"

但主要问题实际上是图标的颜色... 这对我帮助很大：Bootstrap 4 Change Hamburger Toggler Color

【问题讨论】：

首先，如果你使用 bootstrap5，你的“data-”属性应该是“data-bs-”属性。您能否也提供您的引导导入？您是使用 scss 文件还是通过 cdn 导入引导程序？您能否还检查一下您的 svg 是否正常工作，正如我在这张图片中向您展示的那样：prnt.sc/xqxkoq
嘿，谢谢你的回答，我更新了我的帖子。

标签： bootstrap-5

【解决方案1】：

这些 aria-* 属性不是问题。

您能否将以下 CSS 类之一添加到您的导航栏：navbar-light 或 navbar-dark。最后应该是这样的：

<nav id="mainnav" class="navbar navbar-light navbar-expand-md">

引导 scss 文件中的 navbar-toggler-icon 仅在 navbar-light 或 navbar-dark 与类 navbar-toggler-icon 的组合中添加。如果你愿意，你也可以通过 fontawesome 添加一个图标。

例如，您可以在 bootstrap navbar scss 文件（从源代码复制）中查看此内容：

.navbar-light {
  [...]

  .navbar-toggler {
    color: $navbar-light-color;
    border-color: $navbar-light-toggler-border-color;
  }

  .navbar-toggler-icon {
    background-image: escape-svg($navbar-light-toggler-icon-bg);
  }
     
  [...]
}

【讨论】：

我上周五添加了“navbar-light”，但我不知道这是因为这个缺失。非常感谢您的解释。现在更清楚了。 :)
不客气。您能否将您的问题标记为已回答:)
我接受了你的回答，我应该做点别的事情来要求我的话题结束吗？