我知道 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>
我的问题是:有没有办法在没有下拉列表的情况下执行此操作,例如将其放入任何类型的列表或类似菜单中?
答案 0 :(得分:229)
是的,您只需将<hr />
放在您想要的代码中,我已经在我的管理面板栏中使用了它。
答案 1 :(得分:16)
目前它仅适用于.dropdown-menu
:
.dropdown-menu .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
如果你想将它用于其他用途,在你自己的css中,按照 bootstrap.css 创建另一个:
.divider {
height: 1px;
width:100%;
display:block; /* for use on default inline elements like span */
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
答案 2 :(得分:5)
当我发现默认的Bootstrap <hr/>
大小难看时,这里有一些简单的HTML和CSS来直观地平衡元素:
HTML:
<hr class="half-rule"/>
<强> CSS:强>
.half-rule {
margin-left: 0;
text-align: left;
width: 50%;
}