本文介绍了带有 Bootstrap 3 的导航栏拆分按钮下拉菜单的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想使用 Bootstrap 3 制作一个拆分按钮下拉菜单.我没有找到任何工作片段.
我的导航栏看起来像:
<div class="容器"><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>按钮><a class="navbar-brand" href="#">Brand</a>
<div class="navbar-collapse collapse"><ul class="nav navbar-nav"><li><a href="#">示例</a><li><a href="#">示例</a><ul class="nav navbar-nav navbar-right"><li><a href="#">链接</a></li><li class="下拉菜单"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a><ul class="下拉菜单"><li><a href="#">动作</a></li><li><a href="#">另一个动作</a></li><li><a href="#">这里还有别的东西</a></li><li class="divider"></li><li><a href="#">分隔链接</a></li></div><!--/.navbar-collapse -->
</标题>
解决方案
你可以把它放在 nav li
里面,并把 navbar-btn
添加到 btn-组
...
<div class="btn-group navbar-btn"><button class="btn btn-danger">Action</button><button data-toggle="dropdown" class="btn btn-danger dropdown-toggle"><span class="caret"></span></button><ul class="下拉菜单"><li><a href="#">动作</a></li><li><a href="#">另一个动作</a></li><li><a href="#">这里还有别的东西</a></li><li class="divider"></li><li><a href="#">分隔链接</a></li>