Bootstrap 3 Horizontal Divider (no en un menú desplegable)

98

Sé que Bootstrap 3tiene un divisor horizontal que puede colocar dentro de los menús desplegables para separar enlaces 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>

Mi pregunta es: ¿Hay alguna forma de hacer esto sin que esté en un menú desplegable, como ponerlo en cualquier tipo de lista o menú similar?

KeplerIO
fuente

Respuestas:

241

Sí, lo hay, simplemente puede poner <hr>su código donde lo desee, ya lo uso en una de las barras laterales de mi panel de administración.

vog
fuente
3
<hr />es incluso mejor.
Erwin Mayer
21
@ErwinMayer <hr />es para XHTML. En HTML 4 o 5 es solo<hr>
Dave
1
Es una respuesta antigua, pero para aquellos que tropezaron aquí como yo, <hr> no debe usarse para fines de presentación como en el caso OP. Es para cambio temático en párrafos. Al igual que uno no debería usar la etiqueta P para formatear los controles.
KMC
16

Actualmente solo funciona para .dropdown-menu:

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

Si lo desea para otro uso, en su propio css, siguiendo el bootstrap.css cree otro:

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

Como encontré <hr/>antiestético el tamaño predeterminado de Bootstrap , aquí hay algo de HTML y CSS simple para equilibrar el elemento visualmente:

HTML:

<hr class="half-rule"/>

CSS:

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