Bootstrap 3水平分隔线(不在下拉菜单中)


98

我知道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>

我的问题是:有没有办法做到这一点而不将其放在下拉列表中,例如将其放入任何类型的列表或类似菜单中?

Answers:


241

是的,您可以<hr>在任何需要的地方输入代码,我已经在管理面板的一个侧边栏中使用了它。


3
<hr />更好。
欧文·梅耶

21
@ErwinMayer <hr />用于XHTML。在HTML 4或5中,只是<hr>
Dave

1
这是一个旧的答复,但是对于像我一样偶然发现此处的人,不应像OP情况那样将<hr>用于演示目的。这是为了段落中的主题更改。就像不应该使用P标签来格式化控件一样。
KMC

16

目前,它仅适用于.dropdown-menu

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

如果您希望将其用于其他用途,请在bootstrap.css之后,在您自己的CSS中创建另一个:

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

5

当我发现默认的Bootstrap <hr/>大小难看时,下面是一些简单的HTML和CSS,以在视觉上平衡该元素:

HTML:

<hr class="half-rule"/>

CSS:

.half-rule { 
    margin-left: 0;
    text-align: left;
    width: 50%;
 }
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.