html - Bootstrap 导航栏在某些设备上无法正确显示

标签 html css twitter-bootstrap

在某些设备中,折叠的导航栏元素未正确显示。

它们是这样的:

enter image description here

应该是这样的:

enter image description here

导航栏代码:

<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,很难说出为什么会看到这种行为。你能提供工作 sample 吗?

也许这对你有帮助:

Changing the collapsed mobile navbar breakpoint
The navbar collapses into its vertical mobile view when the viewport is narrower than @grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least @grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).

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

您是否检查过网格系统及其一般的 Bootstrap 媒体查询? ( http://getbootstrap.com/css/#grid-media-queries )

关于html - Bootstrap 导航栏在某些设备上无法正确显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36816132/

相关文章:

html - 工具提示向右箭头

jquery - 滚动时如何锁定页面?我如何在所有设备上显示粒子?

javascript - 如何选择一个按钮并在单击该按钮时删除该按钮的祖 parent div?

javascript - 导航栏中的下拉菜单不会展开( Bootstrap 、 Angular 、指令、路线)

html - 将开放 XML 的 XSLT 转换为干净的 HTML 列表

javascript - 我如何处理 Bootstrap div 折叠和展开的奇怪行为

html - 如何在 Firefox 和 IE 中使用键盘导航跳过隐藏的单选选项?

html - 使用 css 和 jquery 展开表格代码

angularjs - 创建 Angular 用户列表(高效)

html - 如何使元素匹配动态页面的高度