data-bs-target="#navbarTogglerDemo01" почему это не работает на Bootstrap-5?

#bootstrap-5

Вопрос:

Обычно я ожидаю увидеть 3 ссылки, когда нажимаю на меню гамбургера справа. Но когда я нажимаю на него, он не показывает мне 3 ссылки: контакты, цены и загрузка. Я точно так же поступил с документом Bootstrap-5 в Интернете.

 <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">


<h1>Hello World</h1>

<nav class="navbar navbar-expand-lg bg-dark navbar-dark">

  <a class="navbar-brand" href="">Company</a>

  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">

    <ul class="navbar-nav ms-auto">
      <li class="nav-item">
        <a class="nav-link" href="">Contact</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="">Download</a>
      </li>
    </ul>
    
  </div>
</nav>

Развернуть фрагмент

Ответ №1:

Для свертывания панели навигации требуется JavaScript. Просто добавьте это в свой проект:

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

Кстати, ваш код неверен. Вам нужно добавить .container-fluid тот или иной контейнер внутри панели навигации. Проверьте документы: https://getbootstrap.com/docs/5.0/components/navbar /

1. спасибо за ответ. Ну, я прохожу курс по udemy. Инструктор сделал то же самое, не добавляя код javascript и этот класс container-fluid, но это сработало. Я сделал все то же самое, за исключением того, что она использовала bootstrap 4, но я использую 5, поэтому она использовала data-target, но я использовал data-bs-target.

2. я смотрю другое видео инструктора, вы правы, она просто сказала, что это сработало, потому что она использовала codeply, где javascript уже включен. Еще раз спасибо.

Ответ №2:

Хорошо! Я не знаю, будет ли это полезно для всех вас или нет, но это помогло мне, сделав именно это. Удалите data-bs-toggle в data-toggle и оставьте все то же самое в пункте кнопки выпадающего меню. Я надеюсь, что это будет полезно для вас, если это так, тогда проголосуйте за меня. и в теле добавьте это также

 href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" 
              integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2 k9luXQOfXJCJ4I" 
              crossorigin="anonymous" />
        <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/5.0.0-alpha1/js/bootstrap.min.js" 
                integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" 
                crossorigin="anonymous">