Bootstrap导航栏在某些设备中未正确显示

debugcn 发表于 Dev

米格尔·莫鲁琼（MiguelMorujão）

在某些设备中，折叠的导航栏项目无法正确显示。

的是这样的：

并且应该是这样的：

导航栏代码：

<div id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation">
        <div class="navbar-header"><a class="navbar-brand" href="index.htm">Index</a>
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse navbar-menubuilder">
            <ul class="nav navbar-nav navbar-left">
                <li><a href="casameio.htm">casa do meio</a>
                </li>
                <li><a href="casabrava.htm">casa brava</a>
                </li>
                <li><a href="casavelha.htm">casa velha</a>
                </li>
                <li><a href="pool.htm">pool</a>
                </li>
                <li><a href="prijzen.htm">prijzen</a>
                </li>
                <li><a href="ons.htm">over ons</a>
                </li>
                <li><a href="activ.htm">activiteiten</a>
                </li>
                <li><a href="guestbook.htm">gastenboek</a>
                </li>
                <li><a href="omgeving.htm">kaartje</a>
                </li>
                <li><a href="contact.htm">contact</a>
                </li>
                <li><a href="links.htm">linken</a>
                </li>
            </ul>
        </div>
    </div>

蟾蜍

由于我尚无法评论问题，因此我想通过以下方式分享自己的想法：

您在说什么设备（意味着哪种屏幕尺寸）？没有任何CSS，很难说出为什么会看到这种行为。您可以提供工作样本吗？

也许可以帮助您：

更改折叠的移动导航栏断点
当视口比@ grid-float-breakpoint窄时，导航栏会折叠到其垂直移动视图，而当视口的宽度至少为@ grid-float-breakpoint时，导航栏会扩展到其水平的非移动视图。在较少源中调整此变量，以控制导航栏何时折叠/展开。默认值为768px（最小的“小”或“平板电脑”屏幕）。

来自http://getbootstrap.com/components/#navbar-default

您是否通常检查了网格系统及其引导的媒体查询？（http://getbootstrap.com/css/#grid-media-queries）

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。