我有多个菜单下 zipper 接。一切正常。但是当屏幕尺寸是平板电脑的尺寸时,下 zipper 接无法正确呈现。当我单击第一个下 zipper 接“成员(member)资格”时,下拉项“管理用户”和下一个下 zipper 接“站点配置”将水平并排呈现,而不是一个在另一个下方。请帮忙。
添加了 jsfiddle:- http://jsfiddle.net/u44kj1bk/
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="navbar-text">Welcome, User!</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="/">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Membership <span class="caret"></span></a>
<ul class="pull-left dropdown-menu">
<li><a href="/WebLink">Manage Users</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Site Configuration <span class="caret"></span></a>
<ul class="pull-left dropdown-menu">
<li><a href="/">Manage Forums</a></li>
<li><a href="/WebLink">Manage Web Links</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Themes <span class="caret"></span></a>
<ul class="pull-left dropdown-menu">
<li><a class="theme-link" datatheme="default" href="#">Day</a></li>
<li><a class="theme-link" datatheme="night" href="#">Night</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
提前致谢!
最佳答案
您对 pull-left
类的使用导致列表项向左浮动,从而水平堆叠。删除类,这应该可以工作。
工作示例:http://jsfiddle.net/aqdyfL9h/1/
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="navbar-text">Welcome, User!</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="/">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Membership <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="/WebLink">Manage Users</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Site Configuration <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="/">Manage Forums</a></li>
<li><a href="/WebLink">Manage Web Links</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Themes <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a class="theme-link" datatheme="default" href="#">Day</a></li>
<li><a class="theme-link" datatheme="night" href="#">Night</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
关于css - Bootstrap 3 中的下 zipper 接水平堆叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26522763/