Bootstrap 移动导航栏显示不正确答案

【问题标题】：Bootstrap mobile navbar not showing correctlyBootstrap 移动导航栏显示不正确
【发布时间】：2016-12-22 01:17:06
【问题描述】：

导航栏在桌面上正常工作，但在手机上看起来像这样：

如何禁用移动版本上的菜单或修复它的最佳方法是什么？

导航条码：

  <nav class="navbar navbar-vira navbar-fixed-top">
           <div class="navigation-bar">
           <div class="container">
                <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Zamknij nawigację</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <div class="logo">
                            <a href="#">XXXX</a>
                        </div>
                </div>
                <ul class="nav navbar-nav navbar-right font-white">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#about">O mnie</a></li>
                    <li><a href="#ofert">Oferta</a></li>
                    <li><a href="#contact">Kontakt</a></li>
                </ul>
            </div>
            </div>
        </nav>

【问题讨论】：

不工作是什么意思？并参考Navbar
您是否尝试过使用引导类hidden-xs？...

标签： jquery html css twitter-bootstrap jquery-mobile

【解决方案1】：

如果您不想在手机上显示菜单。您可以考虑使用媒体查询并限制其显示

检查以下sn-p

@media screen and (min-width:200px) and (max-width:500px){
  ul.nav{
    display:none;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-vira navbar-fixed-top">
           <div class="navigation-bar">
           <div class="container">
                <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Zamknij nawigację</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <div class="logo">
                            <a href="#">XXXX</a>
                        </div>
                </div>
                <ul class="nav navbar-nav navbar-right font-white">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#about">O mnie</a></li>
                    <li><a href="#ofert">Oferta</a></li>
                    <li><a href="#contact">Kontakt</a></li>
                </ul>
            </div>
            </div>
        </nav>

希望对你有帮助 PS：查看全屏输出

【讨论】：

【解决方案2】：

要添加到显示如何完全隐藏导航的其他答案，
以下 HTML 应该允许导航正常工作。您显然需要为下拉功能添加 Bootstrap jQuery。我认为徽标 div 导致了问题。

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
                <a class="navbar-brand" href="#">XXXX</a>
            </div>
            <div class="collapse navbar-collapse" id="main-nav-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#about">O mnie</a></li>
                    <li><a href="#ofert">Oferta</a></li>
                    <li><a href="#contact">Kontakt</a></li>
                </ul>
            </div>
        </div>
    </nav>

【讨论】：