https://jsfiddle.net/smoore4/m2dLp71q/

аюсь реализовать Navbar, используя Bootstrap 4. В настоящее время Navbar корректно сворачивается, когда область просмотра сокращается до размера мобильного устройства. Однако при попытке переключения меню ничего не происходит. Пример jsFiddle демонстрирует это поведение. Я также приложил HTML.

Шаги, которые я предпринял:

Удаление всех пользовательских CSSОбеспечение ссылки jQuery перед загрузочным файлом JSТеги скрипта в верхнем и нижнем колонтитулахСкопируйте и вставьте точные примеры из Документов Bootstrap (и я получаю то же самое поведение)Обеспечение использования JS в браузере ChromeПроверен HTML с использованием валидатора WC3И, конечно, читайте различные посты на SO об этой проблеме, но ни один из них не приведет к решению.

ссылка jsFiddlehttps://jsfiddle.net/u7v5jba9/

    <title>
      Site title
    </title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

    <body>
      <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light">

          <a class="navbar-brand" href="#">
            <i class="fa fa-globe" aria-hidden="true"></i> Brand Name
          </a>

          <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <i class="fa fa-angle-double-down"></i>
          </button>

          <div class="navbar-collapse collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item"><a href="#" class="nav-link ">Link 1</a></li>
              <li class="nav-item"><a href="#" class="nav-link ">Link 2</a></li>
              <li class="nav-item"><a href="#" class="nav-link">Link 3</a></li>
            </ul>
            <ul class="navbar-nav">
              <li class="nav-item"><a href="#" class="nav-link ">Sign In</a></li>
              <li class="nav-item"><a href="#" class="nav-link ">Register</a></li>
              <li class="nav-item"><a href="#" class="nav-link ">Log Out</a></li>
            </ul>
          </div>

        </nav>
      </div>

      <div class="container">
        <nav class="navbar navbar-inverse fixed-bottom text-center">
          <h6 class="text-light text-center">Footer</h6>
        </nav>
      </div>

      <!-- Scripts -->
      <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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
    </body>

заранее спасибо

Ответы на вопрос(1)

Ваш ответ на вопрос