Bootstrap 4 bootstrap 4/Saas导航栏随着屏幕变窄而崩溃，但汉堡包菜单不起作用？_Bootstrap 4_Sass_Handlebars.js_Navbar_Ember Bootstrap

Bootstrap 4 bootstrap 4/Saas导航栏随着屏幕变窄而崩溃，但汉堡包菜单不起作用？

bootstrap-4 sass

Bootstrap 4 bootstrap 4/Saas导航栏随着屏幕变窄而崩溃，但汉堡包菜单不起作用？,bootstrap-4,sass,handlebars.js,navbar,ember-bootstrap,Bootstrap 4,Sass,Handlebars.js,Navbar,Ember Bootstrap,我有一些HTML，它定义了一个Bootstrap4NavBar，运行良好随着窗口宽度的减小，导航栏的细节消失，出现一个汉堡包菜单当你点击汉堡包时，你会看到一个菜单，其中包含的条目与之前在导航栏上看到的条目相对应 HTML如下所示： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="w

我有一些HTML，它定义了一个Bootstrap4NavBar，运行良好

随着窗口宽度的减小，导航栏的细节消失，出现一个汉堡包菜单

当你点击汉堡包时，你会看到一个菜单，其中包含的条目与之前在导航栏上看到的条目相对应

HTML如下所示：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
          <a class="nav-item nav-link" href="#">Features</a>
          <a class="nav-item nav-link" href="#">Pricing</a>
          <a class="nav-item nav-link disabled" href="#">Disabled</a>
        </div>
      </div>
    </nav>
    <h1>Hello, world!</h1>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>

这很好，但我真正想要的是在车把模板中使用该标记，其样式通过Saas进行。整个模板如下所示

<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home1 <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
  </div>
</nav>
  {{outlet}}
</div>

当使用全尺寸窗口渲染模板时，导航栏将按预期显示。类似地，当窗口的大小减小时，导航栏会显示一个汉堡菜单，正如您所期望的那样。但是，当选择汉堡时，不会发生任何事情

您是否有兴趣了解香草引导和sass引导之间的任何特质，这可以解释这一点

所有示例都在最近的Firefox上。

Bootstrap在单击汉堡时添加show类。因此，要在单击锚定标记后关闭菜单，只需执行以下操作：

演示：

代码中的位置，以及其他一些小调整：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <!--Custom CSS-->
    <!-- <link rel="stylesheet" href="style.css"> -->
</head>
<body>
     <!--navbar-->
    <nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarText">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#home">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#features">Features</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#pricing">Pricing</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#disabled">Disabled</a>
                </li>
            </ul>
        </div>
    </nav>
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous">
    </script>

    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>


    <!--smooth scroll-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scroll/16.1.3/smooth-scroll.polyfills.min.js"></script>
    <script>

        $( '#navbarText a' ).on('click', function(){
            $('#navbarText').removeClass('show');
        });
    </script>
    <h1>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Explicabo quas distinctio voluptates autem earum quos delectus natus aliquam vero ullam. Maiores cupiditate soluta veritatis voluptatibus ratione fuga nulla nisi mollitia. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Enim quod qui perspiciatis provident modi ratione vitae quidem voluptate recusandae repudiandae quisquam eaque nesciunt nulla dolorem molestias ipsa, cupiditate harum a. </h1>
    <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem aliquam ex inventore exercitationem dicta deleniti fugiat, molestiae eum accusantium. Minus eveniet eaque aut quibusdam delectus omnis doloremque necessitatibus quas laudantium?</h1>
</body>
</html>

嗨，杰森-我很感谢你的回答，但我恐怕我没有说清楚。菜单的工作方式与我所期望的一样。对于第一个标记示例，即您提供的修订版本，它是第二个标记示例，尽管它在屏幕变窄时会改变模式，但在选择汉堡包菜单时不会显示导航栏内容。我很想听听你的其他想法，谢谢你的回复。