2016-04-23 68 views
0

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

的是这样的:

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> 

回答

1

既然不能在问题尚未置评,我想分享我的这样想:

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

也许这可以帮助你:

改变折叠手机导航栏断点
导航栏折叠 到其垂直移动视图时,视口窄于 @网浮断点,并扩展当视口的宽度至少为@ grid-float-breakpoint时,将其视为水平非移动的 视图。 在导航栏 合拢/展开时,在“较少”来源中调整此变量以控制。默认值为768px(最小的“小”或 “平板电脑”屏幕)。

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

您检查了网格系统和一般的自举其媒体查询? (http://getbootstrap.com/css/#grid-media-queries