尝试在Bootstrap中创建导航栏，以在较小的屏幕尺寸上切换。不幸的是，当我按下切换按钮时，它也将我的徽标从屏幕上推了出来。导航栏内的嵌套容器似乎是一个问题，因为一旦我将其删除，一切都会起作用-但我想保留容器类的其他行为。这是我的代码及其行为：
<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>
