引导3水平分频器（不在下拉菜单中）

我知道Bootstrap 3有一个水平分隔线，你可以放置在下拉菜单中，以分隔这样的链接：

 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2"> <li role="presentation" class="dropdown-header">Dropdown header</li> ... <li role="presentation" class="divider"></li> </ul> 

我的问题是：有没有办法做到这一点，而不是在一个下拉，如将其放入任何types的列表或类似的菜单？

Answer 1

是的，你可以简单地把<hr />放在你想要的代码中，我已经在我的一个pipe理面板中使用它了。

Answer 2

目前它只适用于.dropdown-menu ：

 .dropdown-menu .divider { height: 1px; margin: 9px 0; overflow: hidden; background-color: #e5e5e5; } 

如果你想用于其他用途，在你自己的css中，在bootstrap.css之后创build另一个：

 .divider { height: 1px; width:100%; display:block; /* for use on default inline elements like span */ margin: 9px 0; overflow: hidden; background-color: #e5e5e5; } 

Answer 3

由于我发现默认的Bootstrap <hr/>大小难看，下面是一些简单的HTML和CSS来可视化地平衡元素：

HTML：

<hr class="half-rule"/>

CSS：

 .half-rule { margin-left: 0; text-align: left; width: 50%; }