bootstrap 4 / Навигационная панель Saas сворачивается при сужении экрана, но гамбургер-меню тогда не работает? - PullRequest
Новая
       59

bootstrap 4 / Навигационная панель Saas сворачивается при сужении экрана, но гамбургер-меню тогда не работает?

0 голосов
/ 16 июня 2020

У меня есть 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/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>

Когда шаблон визуализируется (с полноразмерным окном), панель навигации отображается, как и следовало ожидать. Аналогично, когда размер окна уменьшается, панель навигации отображается с гамбургер-меню, как и следовало ожидать, однако, когда гамбургер выбран, ничего не происходит.

Было бы интересно услышать о каких-либо отличиях между vanilla bootstrap и sass boostrap, которые могли бы это объяснить?

Все примеры приведены на недавнем Firefox.

1 Ответ

1 голос
/ 16 июня 2020

Bootstrap добавляет класс «шоу» при нажатии на гамбургер. Итак, чтобы закрыть меню после щелчка по тегу привязки, все, что вам нужно сделать, это:

Демо: https://jsfiddle.net/2kc1etv6/2/

Размещение в вашем коде с другим небольшие настройки: 

<!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>
...