Bootstrap导航栏在某些设备中无法正常显示

时间:2016-04-23 20:39:11

标签: html css twitter-bootstrap

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

是这样的:

enter image description here

应该是这样的:

enter image description here

Navbar代码:

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

1 个答案:

答案 0 :(得分:1)

由于我还没有对问题发表评论,我想以这种方式分享我的想法:

您在谈论什么设备(意味着哪种屏幕尺寸)?没有任何CSS,很难说为什么你会看到这种行为。你能提供一份工作样本吗?

也许这有助于你:

  

更改折叠的移动导航栏断点
  导航栏崩溃   当视口比视口窄时,进入垂直移动视图   @ grid-float-breakpoint,并扩展为其水平非移动   当视口的宽度至少为@ grid-float-breakpoint时查看。   在Less source中调整此变量以控制导航栏的时间   折叠/展开。默认值为768px(最小的&#34;小&#34;或   &#34;片剂&#34;屏幕)。

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

您是否检查过网格系统及其引导程序的媒体查询? (http://getbootstrap.com/css/#grid-media-queries