Bootstrap navbar переключение предметов по центру - PullRequest
Новая
       7

Bootstrap navbar переключение предметов по центру

0 голосов
/ 30 декабря 2018

Попытка создать Navbar в Bootstrap, который переключается на меньшие размеры экрана.К сожалению, когда я нажимаю кнопку переключателя, она выталкивает мой логотип вверх с экрана, как это и происходит.Кажется, проблема с вложенным контейнером внутри Navbar, так как все работает, когда я его удаляю, но я бы хотел сохранить другое поведение классов контейнеров.Вот мой код и его поведение: 

<nav class='navbar fixed-top navbar-expand-lg navbar-light bg-white'>
  <div class='navbar-content container'>
    <a href='#top' class='navbar-brand my-auto mr-3' id='logo'>MG</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-links" aria-controls="navbar-links" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbar-links">
      <ul class='navbar-nav jump-to my-auto'>
        <li class='nav-item'><a href='#about' class='nav-link mx-1'>About</a></li>
        <li class='nav-item'><a href='#skills'class='nav-link mx-1'>Skills</a></li>
        <li class='nav-item'><a href='#projects' class='nav-link mx-1'>Projects</a></li>
        <li class='nav-item'><a href='#places' class='nav-link mx-1'>Tastes + Travels</a></li>
        <li class='nav-item'><a href='#connect' class='nav-link mx-1'>Connect</a></li>
      </ul>
    </div>
    <ul class='navbar-nav social-media mr-4 ml-auto pull-right'>
      <li class='nav-item'><a href='https://www.facebook.com/milan.gupta.735' target='_blank' title='Facebook'><img src='images/social-media-icons/Facebook-icon.png' class='nav-link mx-1'></a></li>
      <li class='nav-item'><a href='https://twitter.com/MilanGuptaa' target='_blank' title='Twitter'><img src='images/social-media-icons/Twitter-icon.png' class='nav-link mx-1'></a></li>
      <li class='nav-item'><a href='https://www.instagram.com/mgupta99/' target='_blank' title='Instagram'><img src='images/social-media-icons/Instagram-icon.png' class='nav-link mx-1'></a></li>
      <li class='nav-item'><a href='https://www.linkedin.com/in/milan-gupta/' target='_blank' title='LinkedIn'><img src='images/social-media-icons/LinkedIn-icon.png' class='nav-link mx-1'></a></li>
    </ul>
    <a id='nav-resume-link' class='nav-item nav-link px-4 py-2 pull-right' href='Resume.pdf' target='_blank' title='See My Resume'>RESUME</a>
  </div>
</nav>

До переключения

После переключения

...