Bootstrap 3 水平分隔符（不在下拉菜单中）

Question

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

我的问题是：有没有办法不使用下拉菜单，将它放入任何类型的列表或类似菜单中？

- user4158347

Answer 1

是的，有的，你可以在代码中简单地放置<hr>，它会出现在你想要的位置，我已经在我的管理面板侧边栏中使用了它。

- user3931708

---

<hr /> 更好。 - Erwin Mayer

@ErwinMayer <hr /> 是针对XHTML的。在HTML 4或5中它只是 <hr>。 - Dave

这是一个旧回复，但对于像我一样偶然发现这里的人来说，<hr>不应该像OP的情况那样用于呈现目的。它是用于段落中主题变化的。就像一个人不应该使用P标签来格式化控件一样。 - KMC

Answer 2

目前它仅适用于.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;
}

- Christina

Answer 3

我发现默认的Bootstrap <hr/> 大小不够美观，以下是一些简单的HTML和CSS来平衡该元素的视觉效果：

HTML：

<hr class="half-rule"/>

CSS：

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

- David Metcalfe