twitter-bootstrap Bootstrap 3 水平分隔线（不在下拉列表中）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26570946/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 Horizontal Divider (not in a dropdown)
提问by KeplerIO
I know Bootstrap 3has a horizontal divider you can place inside of dropdown menus to separate links like this:
我知道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>
My question is:Is there any way to do this without it being in a dropdown, such as putting it into any kind of list or similar menu?
我的问题是：有没有办法做到这一点而不将其放在下拉列表中，例如将其放入任何类型的列表或类似菜单中？
回答by
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.
是的，您可以简单地将<hr>代码放在您想要的位置，我已经在我的管理面板侧栏中使用了它。
回答by Christina
Currently it only works for the .dropdown-menu:
目前它只适用于.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.csscreate another one:
如果你想要它用于其他用途，在你自己的 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;
}
回答by David Metcalfe
As I found the default Bootstrap <hr/>size unsightly, here's some simple HTML and CSS to balance out the element visually:
因为我发现默认的 Bootstrap<hr/>大小难看，所以这里有一些简单的 HTML 和 CSS 来平衡元素的视觉效果：
HTML:
HTML：
<hr class="half-rule"/>
<hr class="half-rule"/>
CSS:
CSS：
.half-rule {
margin-left: 0;
text-align: left;
width: 50%;
}
