Divisore orizzontale Bootstrap 3 (non in un menu a discesa)

98

So che Bootstrap 3ha un divisore orizzontale che puoi posizionare all'interno dei menu a discesa per separare i collegamenti in questo modo:

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

La mia domanda è: esiste un modo per farlo senza che sia in un menu a discesa, ad esempio inserendolo in qualsiasi tipo di elenco o menu simile?

twitter-bootstrap twitter-bootstrap-3

— KeplerIO
fonte

241

Sì, puoi semplicemente inserire il <hr>tuo codice dove vuoi, lo uso già in una delle barre laterali del mio pannello di amministrazione.

— vog
fonte

3

<hr />è anche meglio.

— Erwin Mayer

21

@ErwinMayer <hr />è per XHTML. In HTML 4 o 5 è solo<hr>

— Dave

1

È una vecchia risposta, ma per coloro che sono inciampati qui come me, <hr> non dovrebbe essere usato per scopi di presentazione come nel caso OP. È per il cambiamento tematico nei paragrafi. Proprio come non si dovrebbe usare il tag P per formattare i controlli.

— KMC

16

Attualmente funziona solo per .dropdown-menu:

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

Se lo vuoi per altro uso, nel tuo css, seguendo il bootstrap.css creane un altro:

.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

Poiché ho trovato <hr/>sgradevole la dimensione predefinita di Bootstrap , ecco alcuni semplici HTML e CSS per bilanciare visivamente l'elemento:

HTML:

<hr class="half-rule"/>

CSS:

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

— David Metcalfe
fonte