Divisor horizontal Bootstrap 3 (não em uma lista suspensa)

98

Eu sei que Bootstrap 3tem um divisor horizontal que você pode colocar dentro de menus suspensos para separar links como este: 

<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>

Minha pergunta é: existe alguma maneira de fazer isso sem estar em uma lista suspensa, como colocá-lo em qualquer tipo de lista ou menu semelhante?

twitter-bootstrap twitter-bootstrap-3 KeplerIO
fonte

Respostas:

241

Sim, pode simplesmente colocar o <hr>seu código onde quiser, já o utilizo numa das minhas barras laterais do painel de administração.

vog
fonte
3
<hr />é ainda melhor.
Erwin Mayer
21
@ErwinMayer <hr />é para XHTML. Em HTML 4 ou 5 é apenas<hr>
Dave
1
É uma resposta antiga, mas para aqueles que tropeçaram aqui como eu, <hr> não deve ser usado para fins de apresentação como no caso do OP. É para mudança temática em parágrafos. Assim como não se deve usar a tag P para formatar os controles.
KMC
16

Atualmente só funciona para .dropdown-menu:

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

Se você quiser para outro uso, em seu próprio css, seguindo o bootstrap.css crie outro:

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

Como achei o <hr/>tamanho padrão do Bootstrap feio, aqui estão alguns HTML e CSS simples para equilibrar o elemento visualmente:

HTML:

<hr class="half-rule"/>

CSS:

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