Bootstrap 3导航栏

debugcn 发表于 Dev

史蒂文

我的导航栏具有以下代码-可以在桌面视图上正确显示，但是随着屏幕变小，菜单项无法正确显示。我看到的是该品牌应该存在的链接。无论如何，我都没有更改bootstrap css文件。

<body>
            <nav class="navbar navbar-inverse navbar-fixed-top">
                <div class="container-fluid">
                    <a href="#" class="navbar-brand">Philadelphia Mold Removal</a>

                    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class = "icon-bar"></span>
                        <span class = "icon-bar"></span>
                        <span class = "icon-bar"></span>
                    </button>
                    <div class = "collapse navbar-collapse navHeaderCollapse">
                        <ul class ="nav navbar-nav navbar-right">
                            <li><a href="#">Home</a></li>
                            <li><a href="#">About</a></li>
                            <li><a href="#">Mold Testing</a></li>
                            <li><a href="#">Mold Removal</a></li>
                            <li><a href="#">Water Damage</a></li>
                            <li><a href="#">Blog</a></li>
                        </ul>
                    </div>          
                </div>
            </nav>

     <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</html>

克雷伯特

Bootstrap导航栏文档中对此进行了介绍：

内容溢出

由于Bootstrap不知道导航栏中的内容需要多少空间，因此您可能会遇到问题，将内容包装到第二行。要解决此问题，您可以：

减少导航栏项目的数量或宽度。

使用响应实用程序类（.visible-*/ .hidden-*）以某些屏幕尺寸隐藏某些导航栏项目。

更改导航栏在折叠和水平模式之间切换的点。自定义@grid-float-breakpoint变量或添加您自己的媒体查询。