html - 导航栏在移动显示中不可见

Question

我的站点中有以下导航栏:-

<nav class="navbar navbar-default no-margin show">
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li class="active">
                <button class="navbar-toggle collapse in" data-toggle="collapse" id="menu-toggle-2"> <span class="fa-stack"> <i class="fa fa-bars fa-stack-2x "></i></span></button>
            </li>
        </ul>
        <div style="text-align: center; font-size: 20px; padding-top: 7px;">
            <a href="http://sunlightfoundation.com/" target="_blank"><img src="images/logo.png"></a>
            <p style="display: inline"><b>Congress API</b></p>
        </div>
    </div>
</nav>

此导航栏在笔记本电脑等中型屏幕上可见，但在移动显示器中隐藏。移动显示屏上只有一条白色 strip 。如果我设置任何 CSS 属性以使其在移动设备中显示，我没有适用于大型设备的任何 CSS。切换按钮也不可见。这方面很新。

Answer 1

您的整个导航栏都包含在折叠类中，该类应该隐藏在移动显示中并通过切换按钮进行切换。但是由于您的切换按钮位于折叠类中，因此它被隐藏在移动宽度中。您的导航栏结构应该有一个 .navbar-header 类，您的切换按钮和 Logo 应该放在其中。然后你的链接应该放在 .collapse 类中，这样按钮就会以移动宽度显示，然后你的内容就可以切换了。下面是您的结构应该如何显示的示例。

<div class="navbar navbar-default">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">Your Logo</a>
    <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 navbar-right">
      <li class="active"><a href="#">Your Links</a></li>
      <li><a href="#">Your Links</a></li>
      <li><a href="#">Your Links</a></li>
    </ul>
  </div>
</div>