bootstrap 4 Saas导航条会随着屏幕缩小而折叠，但汉堡包菜单却无法使用？

问题描述 投票：0回答：1

我有一些HTML，它定义了一个bootstrap 4的导航条，并且工作正常。

enter image description here

当窗口宽度减小时，导航条的细节消失了，出现了一个汉堡包菜单。

enter image description here

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

enter image description here

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/[email protected]/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>

这一切都很好，但实际上我想在一个handlebar模板中使用这些标记，它的风格是通过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>

当模板被渲染时（在一个全尺寸的窗口中），导航条显示为你所期望的那样。同样，当窗口的大小减少时，导航栏显示的是一个汉堡包菜单，因为你会期望，但是当汉堡包被选中时，什么都没有发生。

有兴趣听听vanilla bootstrap和sass boostrap之间的任何特殊性，这可能是解释这个问题？

所有的例子都是在最近的Firefox上。

bootstrap-4 sass handlebars.js navbar ember-bootstrap
1个回答
1
投票

Bootstrap在点击汉堡包时增加了 "显示 "类。因此，要想在点击锚标签后关闭菜单，你只需这样做。

演示： https:/jsfiddle.net2kc1etv62

放在你的代码中，并进行一些其他的小调整。

<!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/[email protected]/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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.