Почему не открывается в мобильной версии Bootstrap navbar?

Игорь
292
0
Помогите пожалуйста. Почему не открывается в мобильной версии Bootstrap navbar?
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <strong><em><a class="nav-link" href="/">МИР ДВЕРЕЙ</a></em></strong>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <a class="navbar-brand" href="/glass"><button type="button" class="btn btn-outline-primary"><em>Межкомнатные двери</em></button></a>
        </ul>
        <ul class="navbar-nav mr-auto">
          <a class="navbar-brand" href="/peregorodki"><button type="button" class="btn btn-outline-primary"><em>Перегородки</em></button></a>
        </ul>
        <ul class="navbar-nav mr-auto">
          <a class="navbar-brand" href="/sauna"><button type="button" class="btn btn-outline-primary"><em>Для сауны и бани</em></button></a>
        </ul>
        <ul class="navbar-nav mr-auto">
          <a class="navbar-brand" href="/showers"><button type="button" class="btn btn-outline-primary"><em>Душевые ограждения</em></button></a>
        </ul>
        <ul class="navbar-nav mr-auto">
            <a class="navbar-brand" href="/mirrors"><button type="button" class="btn btn-outline-primary"><em>Зеркала</em></button></a>
        </ul>
        <ul class="navbar-nav mr-auto">
            <a class="navbar-brand" href="/constructions"><button type="button" class="btn btn-outline-primary"><em>Стеклянные конструкции</em></button></a>
        </ul>
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
              <a class="navbar-brand" href="/delivery"><button type="button" class="btn btn-outline-primary"><em>Доставка</em></button></a>
          </li>
        </ul>
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
              <a class="navbar-brand" href=""><button type="button" class="btn btn-outline-primary"><em> Телефон:
                8 977 808-52-57</em></button></a>
          </li>
        </ul>
    </div>
</nav>

Комментарии ()

  1. Александр Мальцев
    25 марта 2021, 15:33
    В кнопке data атрибуты указали неправильно.
    Необходимо так:
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
    
    1. Игорь
      25 марта 2021, 20:29
      Спасибо большое! Уже нашел. Вы правы. Это boostrap 5 она не правильно работает, поменял как раз то, что Вы показали из bootstrap 4 и все заработало.
    2. Игорь
      24 марта 2021, 16:26
      Вот base.html
      1. Игорь
        24 марта 2021, 16:25
        <!doctype html>
        <html lang="ru">
        
        <head>
            <!-- Required meta tags -->
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
        
            <!-- Bootstrap CSS -->
            <link rel="stylesheet" href="/static/slick/slick.css">
            <link rel="stylesheet" href="/static/slick/slick-theme.css">
            <link rel="stylesheet" href="/static/css/main.css">
            <link rel="stylesheet" href="/static/css/main.css">
            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
        
            {% block title %}{% endblock %}
            <title>{{ page_title }}</title>
        </head>
        
        <body>
            {% include 'menu.html' %} {% block body %}{{ heading }}{% endblock %}
        
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
            <!-- <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> -->
            <script src="/static/slick/slick.js"></script>
            <script src="/static/slick/slick.min.js"></script>
            <script src="/static/slick/slider.js"></script>
        
            <footer>
        
                <div class="container" style="color:#0000CD;">
                    <div class="row">
                        <div class="col-md-6 col-md-pull-6">
                            <div class="f-box left">
                                <div class="phone-box">
                                    <i class="demo-icon app-phone"></i>
                                    <a href="tel:+79778085257"><span>Телефон: 8 977</span> 808-52-57</a>
                                    <p>115201. Москва
         ул. 1-й Котляковский переулок
        дом 3, офис 49</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </footer>
        
            <!-- Optional JavaScript; choose one of the two! -->
        
            <!-- Option 1: Bootstrap Bundle with Popper -->
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
        
            <!-- Option 2: Separate Popper and Bootstrap JS -->
            <!--
            <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
            -->
        </body>
        
        </html>
        
        1. Игорь
          24 марта 2021, 16:21
          <!doctype html>
          <html lang="ru">
          
          <head>
              <!-- Required meta tags -->
              <meta charset="utf-8">
              <meta name="viewport" content="width=device-width, initial-scale=1">
          
              <!-- Bootstrap CSS -->
              <link rel="stylesheet" href="/static/slick/slick.css">
              <link rel="stylesheet" href="/static/slick/slick-theme.css">
              <link rel="stylesheet" href="/static/css/main.css">
              <link rel="stylesheet" href="/static/css/main.css">
              <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
          
              {% block title %}{% endblock %}
              <title>{{ page_title }}</title>
          </head>
          
          <body>
              {% include 'menu.html' %} {% block body %}{{ heading }}{% endblock %}
          
              <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
              <!-- <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> -->
              <script src="/static/slick/slick.js"></script>
              <script src="/static/slick/slick.min.js"></script>
              <script src="/static/slick/slider.js"></script>
          
              <footer>
          
                  <div class="container" style="color:#0000CD;">
                      <div class="row">
                          <div class="col-md-6 col-md-pull-6">
                              <div class="f-box left">
                                  <div class="phone-box">
                                      <i class="demo-icon app-phone"></i>
                                      <a href="tel:+79778085257"><span>Телефон: 8 977</span> 808-52-57</a>
                                      <p>115201. Москва
           ул. 1-й Котляковский переулок
          дом 3, офис 49</p>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </footer>
          
              <!-- Optional JavaScript; choose one of the two! -->
          
              <!-- Option 1: Bootstrap Bundle with Popper -->
              <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
          
              <!-- Option 2: Separate Popper and Bootstrap JS -->
              <!--
              <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
              <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
              -->
          </body>
          
          </html>
          
          1. Александр Мальцев
            24 марта 2021, 16:08
            Привет! Может забыли JavaScript код Bootstrap подключить?
            1. Игорь
              24 марта 2021, 16:28
              <!doctype html>
              <html lang="ru">
              
              <head>
                  <!-- Required meta tags -->
                  <meta charset="utf-8">
                  <meta name="viewport" content="width=device-width, initial-scale=1">
              
                  <!-- Bootstrap CSS -->
                  <link rel="stylesheet" href="/static/slick/slick.css">
                  <link rel="stylesheet" href="/static/slick/slick-theme.css">
                  <link rel="stylesheet" href="/static/css/main.css">
                  <link rel="stylesheet" href="/static/css/main.css">
                  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
              
                  {% block title %}{% endblock %}
                  <title>{{ page_title }}</title>
              </head>
              
              <body>
                  {% include 'menu.html' %} {% block body %}{{ heading }}{% endblock %}
              
                  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
                  <!-- <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> -->
                  <script src="/static/slick/slick.js"></script>
                  <script src="/static/slick/slick.min.js"></script>
                  <script src="/static/slick/slider.js"></script>
              
                  <footer>
              
                      <div class="container" style="color:#0000CD;">
                          <div class="row">
                              <div class="col-md-6 col-md-pull-6">
                                  <div class="f-box left">
                                      <div class="phone-box">
                                          <i class="demo-icon app-phone"></i>
                                          <a href="tel:+79778085257"><span>Телефон: 8 977</span> 808-52-57</a>
                                          <p>115201. Москва
               ул. 1-й Котляковский переулок
              дом 3, офис 49</p>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </footer>
              
                  <!-- Optional JavaScript; choose one of the two! -->
              
                  <!-- Option 1: Bootstrap Bundle with Popper -->
                  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
              
                  <!-- Option 2: Separate Popper and Bootstrap JS -->
                  <!--
                  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
                  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
                  -->
              </body>
              
              </html>
              
              1. Игорь
                24 марта 2021, 16:20
                Привет! Скажу честно, я только учусь и очень мало знаком со всеми… я забыл еще один файл сюда сбросить. Я наследую еще один файл base.html сейчас попробую его добавить.
                1. Игорь
                  24 марта 2021, 16:27
                  <!doctype html>
                  <html lang="ru">
                  
                  <head>
                      <!-- Required meta tags -->
                      <meta charset="utf-8">
                      <meta name="viewport" content="width=device-width, initial-scale=1">
                  
                      <!-- Bootstrap CSS -->
                      <link rel="stylesheet" href="/static/slick/slick.css">
                      <link rel="stylesheet" href="/static/slick/slick-theme.css">
                      <link rel="stylesheet" href="/static/css/main.css">
                      <link rel="stylesheet" href="/static/css/main.css">
                      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
                  
                      {% block title %}{% endblock %}
                      <title>{{ page_title }}</title>
                  </head>
                  
                  <body>
                      {% include 'menu.html' %} {% block body %}{{ heading }}{% endblock %}
                  
                      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
                      <!-- <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> -->
                      <script src="/static/slick/slick.js"></script>
                      <script src="/static/slick/slick.min.js"></script>
                      <script src="/static/slick/slider.js"></script>
                  
                      <footer>
                  
                          <div class="container" style="color:#0000CD;">
                              <div class="row">
                                  <div class="col-md-6 col-md-pull-6">
                                      <div class="f-box left">
                                          <div class="phone-box">
                                              <i class="demo-icon app-phone"></i>
                                              <a href="tel:+79778085257"><span>Телефон: 8 977</span> 808-52-57</a>
                                              <p>115201. Москва
                   ул. 1-й Котляковский переулок
                  дом 3, офис 49</p>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </footer>
                  
                      <!-- Optional JavaScript; choose one of the two! -->
                  
                      <!-- Option 1: Bootstrap Bundle with Popper -->
                      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
                  
                      <!-- Option 2: Separate Popper and Bootstrap JS -->
                      <!--
                      <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
                      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
                      -->
                  </body>
                  
                  </html>
                  
              Войдите, пожайлуста, в аккаунт, чтобы оставить комментарий.