Bootstrap 4 Кнопка Cheese Burger не отвечает за пределы ручки кода

Question

Это может быть относительно легко решить проблему, но не для меня, поэтому любая помощь будет оценена. Работая над портфельным проектом от https://freecodecamp.org, я понял, что когда я копирую свой код в код VS и просматриваю его в своем браузере, кнопка булочки с сыром на навигационной панели не отвечает.

Но когда я выполняю это же действие в редакторе Codepen, оно работает как шарм. вот ссылка на страницу в codepen https://codepen.io/stealthman22/full/PeZvNK/.Also фрагмент кода для кнопки бургера с сыром:

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

Пожалуйста, что может быть не так? Cheeers!.

Answer 1

Хорошо. Итак, я протестировал ваш код на своей машине и обнаружил на нем две проблемы

Сначала бустрап был объявлен до jquery.min.js. При использовании boostrap рекомендуется загружать jquery до того, как он будет иметь некоторые зависимости от самой библиотеки jquery

Во-вторых, целостность SHA384 вашего CDN Bootstrap была недействительной.

выдает ошибку при открытии консоли

Failed to find a valid digest in the 'integrity' attribute for resource 'https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js'

Я заменяю ваш CDN этим, и он работает как шарм

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Вот теперь в браузере все выглядит нормально