导航栏在移动显示中不可见 [英] navbar not visible in mobile display

问题描述

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

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav">
<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>
<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>

</nav>

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

解决方案

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

<div class="navbar-header"><a class="navbar-brand" href="#">您的徽标</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>
<div class="navbar-collapse collapse"><ul class="nav navbar-nav navbar-right"><li class="active"><a href="#">您的链接</a></li><li><a href="#">您的链接</a></li><li><a href="#">您的链接</a></li>

I have the following navbar in my site:-

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

This navbar is visible on medium screens like laptop but it is hidden in mobile displays. There is just a white strip in the mobile display. I dont have any CSS for the large devices should I set any CSS properties to get it shown in mobile devices. The toggle button is also not visible. Pretty new at this.

解决方案

Your entire navbar is wrapped in the collapse class which is supposed to be hidden in the mobile display and toggled by the toggle button. But since your toggle button is in the collapse class it is being hidden in mobile widths. Your navbar structure should have a .navbar-header class where your toggle button and logo should be placed. Then your links should be placed in the .collapse class so the button will be displayed in moblile widths and then your content can be toggled. Here is an example of how your structure should look.

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

这篇关于导航栏在移动显示中不可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！