Bootstrap Navbar Toggle открывается вверх? Переключатель не закрывается по клику?

Я использую MDBootstrap (по сути, Bootstrap 4) Navbar Collapse, однако кнопка переключения не сворачивается при нажатии на элемент. Я обратился к MDBootstrap и, похоже, не получил ответа. Мне сказали использовать Angular, но я использую JQuery, и я читал, что вы не должны смешивать их вместе. Кроме того, я не знаю, как мне включить Angular на свой веб-сайт. Раньше я использовал Bootstrap, и мне никогда не приходилось использовать Angular только для того, чтобы кнопка переключения закрывалась после нажатия. Это звучит знакомо кому-нибудь?

Наконец, когда я нажимаю кнопку переключения, она открывается вверх, а не вниз — может ли кто-нибудь помочь с этим, я бы хотел, чтобы она открывалась вниз.

Мой код здесь:

  <nav class="navbar fixed-top navbar-expand-lg navbar-dark scrolling-navbar" style="height: 70px;">
    <div class="container">

      <!-- Brand -->
      <a class="navbar-brand" href="index.php"><img src="img/andrea1.jpg" class="rounded-circle img-fluid">
      </a>


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

    <!-- Links -->
    <div class="collapse navbar-collapse text-center" id="navbarSupportedContent">
      <!-- Left -->
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" href="#about">About
            <span class="sr-only">(current)</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#port">Portfolio</a>
        </li>       

</ul>
      <!-- Right -->
      <ul class="navbar-nav nav-flex-icons">
        <li class="nav-item">
          <a href="https://www.linkedin.com/in/andreasanchez2/" class="nav-link" target="_blank" title="Follow on LinkedIn">
            <i class="fa fa-linkedin"></i>
          </a> 
        </li>
        <li class="nav-item">
          <a href="https://github.com/dec23rd1986"  class="nav-link" target="_blank" title="Follow on Github">
            <i class="fa fa-github"></i>
          </a> 
        </li>
        <li class="nav-item">
          <a href="https://twitter.com/dec23rd1986" class="nav-link" target="_blank" title="Follow on Twitter">
            <i class="fa fa-twitter"></i>
          </a> 
        </li>

        <li class="nav-item">
          <a href="#contact" class="nav-link" title="Contact">
            <i class="fa fa-envelope mr-3"></i>
          </a>
        </li>
      </ul>

    </div>

  </div>
</nav>

html bootstrap-4 mdbootstrap
person Alexandra    schedule 25.03.2018    source источник
comment
Вы можете включить jsfiddle или фрагмент кода?   -  person Hooman Bahreini    schedule 25.03.2018

Ответы (1)


arrow_upward
0
arrow_downward

Не устанавливайте высоту на панели навигации. Удалите style="height:70px;".

<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark scrolling-navbar">
    <div class="container">
    ...
    </div>
</nav>

Работает как положено

person Zim    schedule 25.03.2018
comment
Спасибо Зим! Это сработало, чтобы заставить его упасть вниз. Вы знаете, как я могу заставить переключатель закрываться после щелчка? - person Alexandra; 25.03.2018
comment
Переключатель закрывает навигацию при нажатии. Вы имеете в виду закрытие навигации после нажатия одной из ссылок навигации? - person Zim; 25.03.2018
comment
О да. Навигация не закрывается, когда я нажимаю либо на портфолио, либо на любую ссылку в социальных сетях. - person Alexandra; 25.03.2018
comment
Это ожидаемое поведение. Меню должно открываться/закрываться только с помощью переключателя. Вы можете переопределить это поведение и закрыть его после нажатия, как объяснено в этом вопросе/ответе. Пожалуйста, примите этот ответ, чтобы другие знали, что вопрос решен. - person Zim; 25.03.2018
comment
Зим! Вы спаситель жизни! Я не могу сказать вам, как долго я пытался выяснить ошибку закрытия после клика! Спасибо!!! :) - person Alexandra; 26.03.2018