Bootstrap 3 Horizontal Divider (nicht in einem Dropdown)

98

Ich weiß, dass Bootstrap 3es einen horizontalen Teiler gibt, den Sie in Dropdown-Menüs platzieren können, um Links wie diesen zu trennen: 

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

Meine Frage ist: Gibt es eine Möglichkeit, dies zu tun, ohne dass es in einem Dropdown-Menü angezeigt wird, z. B. in eine Liste oder ein ähnliches Menü?

twitter-bootstrap twitter-bootstrap-3 KeplerIO
quelle

Antworten:

241

Ja, Sie können <hr>Ihren Code einfach dort eingeben, wo Sie ihn möchten. Ich verwende ihn bereits in einer der Seitenleisten meines Admin-Panels.

vog
quelle
3
<hr />ist noch besser.
Erwin Mayer
21
@ErwinMayer <hr />ist für XHTML. In HTML 4 oder 5 ist es nur<hr>
Dave
1
Es ist eine alte Antwort, aber für diejenigen, die hier wie ich gestolpert sind, sollte <hr> nicht für Präsentationszwecke wie im OP-Fall verwendet werden. Es ist für die thematische Änderung in Absätzen. Genauso wie man kein P-Tag zum Formatieren von Steuerelementen verwenden sollte.
KMC
16

Derzeit funktioniert es nur für .dropdown-menu:

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

Wenn Sie es für eine andere Verwendung in Ihrem eigenen CSS verwenden möchten, erstellen Sie nach der Datei bootstrap.css ein weiteres:

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

Da ich die Standardgröße des Bootstraps als <hr/>unansehnlich empfunden habe, finden Sie hier einige einfache HTML- und CSS-Elemente, um das Element visuell auszugleichen:

HTML:

<hr class="half-rule"/>

CSS:

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