Bootstrap 3水平分割器(不在下拉列表中)

时间:2014-10-26 07:53:13

标签: twitter-bootstrap twitter-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>

我的问题是:有没有办法在没有下拉列表的情况下执行此操作,例如将其放入任何类型的列表或类似菜单中?

3 个答案:

答案 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%;
 }