Bootstrap 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>

我的问题是: 有没有办法不把它放在下拉列表中，比如放在任何类型的列表或类似的菜单中？

285532 次浏览

小开

最佳答案

Yes there is, you can simply put <hr> in your code where you want it, I already use it in one of my admin panel side bar.

小开

Currently it only works for the .dropdown-menu:

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

If you want it for other use, in your own css, following the bootstrap.css create another one:

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

小开

As I found the default Bootstrap <hr/> size unsightly, here's some simple HTML and CSS to balance out the element visually:

HTML:

<hr class="half-rule"/>

CSS:

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