Question

我正在使用引导程序，但不知道为什么我的汉堡菜单无法显示。这不是我第一次使用这个框架，所以我认为我的安装很好，我的样式表链接在我的脑海中，我的 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 文件，而是通过他们在网站上提供的链接导入引导程序：

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

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

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

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

Answer 1

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

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

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

bootstrap scss 文件中的 navbar-toggler-icon 仅在 navbar-light 或 navbar-dark 与类 navbar-toggler-icon 的组合中添加。如果需要，您也可以通过 fontawesome 添加图标。

例如，您可以在引导程序导航栏 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);
  }
     
  [...]
}

Bootstraps 5.0 汉堡菜单

1 个答案: