Как исправить неработающее меню на мобильном устройстве

Question

Я новичок более или менее во всем. Работая на моем первом сайте с использованием начальной загрузки, я не могу понять, почему мое меню работает в браузере, а не на мобильном телефоне.

Я прочитал некоторые темы о похожих проблемах и попробовал кое-что, но безуспешно. Bootstrap CSS и скрипты загружены.

<nav class="navbar navbar-expand-sm navbar-light bg-light">
  <a class="navbar-brand" href="#"><i class="fas fa-medal"></i></a>
  <button type="button" class="navbar-toggle"  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="navbar-collapse collapse id="navbarSupportedContent">
    <ul class="navbar-nav justify-content-center d-flex flex-fill">
      <li class="nav-item active">
        <a class="nav-link" href="#"><i class="fas fa-home"></i> Link <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Logga in <span class="caret"></span></a>
          <ul class="dropdown-menu dropdown-lr" role="menu">
            <div class="col-lg-12">
              <div class="text-center">
                <h3><b>Logga in</b></h3></div>
              <form id="ajax-login-form" action="/login/process" method="post" role="form" autocomplete="off">
                <div class="form-group">
                  <label for="username">Användarnamn</label>
                  <input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Användarnamn" value="" autocomplete="off">
                </div>

                <div class="form-group">
                  <label for="password">Lösenord</label>
                  <input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Lösenord" autocomplete="off">
                  <input type="checkbox" tabindex="3" name="remember" id="remember">
                      <label for="remember">Kom ihåg mig</label>
                </div>
                <div class="form-group">
                  <div class="row">
                    <div class="col-xs-6">
                      <input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-success" value="Log In">
                    </div>
                  </div>
                </div>

                <div class="form-group">
                  <div class="row">
                    <div class="col-lg-12">
                      <div class="text-center">
                        <a href="/recover" tabindex="5" class="forgot-password">Glömt lösenord?</a>
                      </div>
                    </div>
                  </div>
                </div>
                <input type="hidden" class="hide" name="token" id="token" value="a465a2791ae0bae853cf4bf485dbe1b6">
              </form>
            </div>
          </ul>
        </li>
      </ul>
    </div>
  </div>
    </ul>
  </div>
</nav>

Пожалуйста, помогите этому бедному нубу. Я был бы всегда благодарен.

Answer 1

Спасибо.

Решение было сделано путем изменения этих частей:

<button type="button" class="navbar-toggler mr-2"  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="navbar-collapse collapse id="navbarSupportedContent">

На это:

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

Answer 2

Эта проблема может быть вызвана несоответствием версии jquery с начальной загрузкой. Так что проверьте свои версии начальной загрузки и jquery. Кроме того, кажется, что вы ошиблись при создании складной панели навигации, проверьте также кнопку свертывания и цели переключения данных.

Тем не менее, вот моя панель навигации, она отзывчива, и ссылки на мобильных устройствах также работают нормально:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

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


<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <div class="navheader-div order-0">
    <a class="navbar-brand mr-auto" href="/home">B-strap NavBar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
  <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">menu-1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">menu-2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">menu-3</a>
      </li>
      <li class="nav-item" *ngIf="false">
        <a class="nav-link" href="#">menu-4</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Settings</a>
      </li>
    </ul>
  </div>
  <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Login</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Registration</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Log Out</a>
      </li>
    </ul>
  </div>
</nav>

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