在Bootstrap框架中的下拉菜单还提供了下拉分隔线，假设下拉菜单有两个组，那么组与组之间可以通过添加一个空的<li>，并且给这个<li>添加类名“divider”来实现添加下拉分隔线的功能。对应的样式代码：
/*源码bootstrap.css文件第3034行～第3039行*/
.dropdown-menu .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
效果如下：
我来试一试：完成下面代码
在代码编辑器中输入代码，实现为下拉菜单添加条分隔线效果，效果如下图：
参考代码如下：
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
食物
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">苹果</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">香蕉</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">梨</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">桃</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">芹菜</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">萝卜</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">茄子</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">米饭</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">馒头</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">面条</a></li>
</ul>
</div>
备注:这一小节没有正确性验证，请查看结果窗口与教案所给的结果图片是否一致，从而判断输入代码是否正确。
请验证，完成请求
由于请求次数过多，请先验证，完成再次请求
打开微信扫码自动绑定
绑定后可得到
使用 Ctrl+D 可将课程添加到书签
举报