如何在使用bootstrap创建的小屏幕上修复重叠的导航栏元素？

Question

Navbar品牌名称和按钮重叠

这是小屏幕上的理想结果

导航栏代码

<nav class="navbar navbar-default micah-navbar-bg">
  <div class="navbar-header">
  <a class="navbar-brand navbar-brand-left" href="#"> <img src="/sites//cologo.png" alt="logo"></a><p style="display:inline-block;">Company name</p>
    <button id="quickLinksbtn" type="button" class="btn btn-danger ">QUICK LINKS</button>    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
    <div class="navbar-header navbar-right">
        <p class="navbar-text">
        <a href="#" class="navbar-link">Username</a>
        </p>
    </div>
  </div>
</nav>

Css快速链接

#quickLinksbtn{
position: absolute;
right: 100px;
margin-top: 45px;
border-radius: 0px;
}

Answer 1

我认为可能会发生混乱。 ＆＃34;快速链接＆＃34; square不能保持相同的大小，也不能是徽标，也不是导航按钮。

这就是他们重叠的原因。

就个人而言：我只是建立一个移动版本的网站，你想要它在移动设备上看起来如何，并把它全部放在一个div中并且有一个div＆＃34; display：none＆＃34;比任何大于800px的东西。并且＆＃34;显示：块＆＃34;在任何小于那个。

同样，您的桌面导航部分也是相反的。

@media screen and (max-width: 800px) {
   .mobile-nav{display:block;}
   .desktopnav{display:none;}
}

@media screen and (min-width: 801px) {
   .mobile-nav{display:none;}
   .desktopnav{display:block;}
}