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>

此导航栏在笔记本电脑等中等屏幕上可见，但隐藏在移动显示屏中。移动显示屏上只有一个白色条带。如果我设置任何CSS属性以便在移动设备中显示，我没有大型设备的CSS。切换按钮也不可见。相当新鲜。

Answer 1

您的整个导航栏都包含在崩溃类中，该类应该隐藏在移动显示中并通过切换按钮切换。但由于您的切换按钮位于折叠类中，因此它将隐藏在移动宽度中。您的导航栏结构应该有一个.navbar-header类，您可以在其中放置切换按钮和徽标。然后您的链接应放在.collapse类中，这样按钮将以moblile宽度显示，然后您的内容可以切换。以下是结构外观的示例。

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

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

1 个答案: