如何修复使用引导程序创建的小屏幕上的重叠导航栏元素？答案

【问题标题】：How to fix the overlapping navbar elements on small screen created using bootstrap?如何修复使用引导程序创建的小屏幕上的重叠导航栏元素？
【发布时间】：2017-09-11 14:35:09
【问题描述】：

导航栏品牌名称和按钮重叠

这是小屏幕上想要的结果

导航栏代码

<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;
}

【问题讨论】：

我认为由于大尺寸的标志，汉堡的空间较小。减小徽标大小。或者做一个适当的 sn-p 来演示你的问题-
您使用过任何媒体查询吗？很难说，你能提供一个小提琴吗？
只有这么多东西可以横向放在小屏幕上，所以你必须做出选择。我会隐藏“公司名称”文本和“快速链接”按钮。屏幕不会像您希望的那样变宽。

标签： html css twitter-bootstrap user-interface navbar

【解决方案1】：

我认为可能会发生一些混乱。 “快速链接”方块将无法保持相同大小，徽标和导航按钮也不会。

这就是它们重叠的原因。

就我个人而言：我只会按照您希望它在移动设备上的外观来构建网站的移动版本，然后将其全部放在一个 div 中，并在大于 800 像素的任何东西上显示该 div“显示：无”。并且“显示：阻止”任何比这更小的东西。

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

@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;}
}

【讨论】：