Bootstrap выпадающее меню навигационной панели / свернутая навигационная панель не открывается - PullRequest
Новая
       13

Bootstrap выпадающее меню навигационной панели / свернутая навигационная панель не открывается

0 голосов
/ 02 октября 2018

Я пытаюсь добавить навигационную панель на этот сайт, но по какой-то причине он не работает так, как я думал.Основная проблема, которую я пытаюсь решить, - это получить выпадающее меню для отображения списка.Визуально это выглядит так, будто меню уже расширено, но я не знаю, связано ли это с тем, почему оно не работает.В настоящее время свернутая версия открывается из меню гамбургера только из-за добавленного мной CSS.Без CSS эта панель навигации будет расширяться, но сразу же снова рушится.Вещи, которые я пробовал:

  • Я пытался изменить порядок, в который я включаю Bootstrap.js / css и jQuery, но это не влияет на это.
  • Я также пытался переключать версии, потому что я не уверен, что с чем совместимо, но это не удалось.
  • Единственное, что сработало, - это использование старой версии начальной загрузки, но я хотел бы использовать 4.0 или выше, если это возможно.

Я был бы признателен, если бы кто-то мог помочь мне выяснить, почему это не работает.Спасибо!

.navbar-collapse.collapse.in {
  display: block!important;
}
<!DOCTYPE html>
<html>
<head>
   <title>Title</title>


  <script
  src="https://code.jquery.com/jquery-3.2.1.min.js">
  </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  
  <link rel="stylesheet" href="index.css">

   

</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <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">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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">
          Products
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About Us</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

<div class="jumbotron">
  <h1 class="display-3">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <p class="lead">
    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
  </p>
</div>

</body>
</html>

1 Ответ

0 голосов
/ 02 октября 2018

Это потому, что ваш bootstrap.js является версией 3.3.7, и это не то, как вы реализуете подменю (в начальной загрузке 3).Хотя, если вы уже используете bootstrap 4, вам следует рассмотреть возможность обновления bootstrap.js до версии 4.0.0 (и вы должны использовать те же версии bootstrap.js и bootstrap.css, чтобы избежать непредвиденных ошибок (как у вас только что было). 

.navbar-collapse.collapse.in {
  display: block!important;
}
<!DOCTYPE html>
<html>
<head>
   <title>Title</title>


  <script
  src="https://code.jquery.com/jquery-3.2.1.min.js">
  </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  
  <link rel="stylesheet" href="index.css">

   

</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <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">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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">
          Products
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About Us</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

<div class="jumbotron">
  <h1 class="display-3">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <p class="lead">
    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
  </p>
</div>

</body>
</html>
...