Bootstrap 4 панель навигации не скользит вниз при нажатии на раскрывающееся меню - PullRequest
Новая
       10

Bootstrap 4 панель навигации не скользит вниз при нажатии на раскрывающееся меню

0 голосов
/ 19 июня 2020

Я пытаюсь заставить панель навигации bootstrap 4 при переключении скользить вниз при нажатии раскрывающегося меню. Он скользит, когда нажата кнопка переключения, но затем, когда раскрывающееся меню щелкается, оно просто нормально расширяется без перехода. Приветствуется любая помощь или руководство.

image

Скользящее меню

Спасибо всем!

Для справки см. Прикрепленное изображение. Что должно произойти

Ответы [ 2 ]

0 голосов
/ 19 июня 2020

Я помещаю data-toggle = "collapse" и data-target = "# collapsibleNavbar" от кнопки к верхнему тегу.

Теперь все работает. пожалуйста, посмотрите на это. работает так же, как вы хотите или нет. 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-expand-md bg-dark navbar-dark " data-toggle="collapse" data-target="#collapsibleNavbar">
  <a class="navbar-brand" href="#">Project</a>
  
  <button class="navbar-toggler bg-dark d-lg-none d-xl-none" type="button" >
    <span class="navbar-toggler-icon"></span>
  </button>
  
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
    <li class="nav-item">
        <a class="nav-link" href="#">Project 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Project 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Project 3</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Project 4</a>
      </li> 
      <li class="nav-item ">
         <a class="nav-link float-lg-right" href="#">Sign Out/In/Up</a>
      </li>
    </ul>
  </div>  
</nav>


</body>
</html>
0 голосов
/ 19 июня 2020

Я удаляю классы .animate__animated .animate__slideInUp из вашего div, который содержит список

image

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...