web-dev-qa-db-de.com

Bootstrap 3 Horizontal Divider (nicht in einem Dropdown)

Ich weiß Bootstrap 3 hat einen horizontalen Teiler, den Sie in Dropdown-Menüs einfügen können, um die Links wie folgt 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, wie z. B. in eine Liste oder ein ähnliches Menü?

twitter-bootstraptwitter-bootstrap-3
94
KeplerIO

Ja, Sie können einfach <hr /> in Ihrem Code, wo Sie es wollen, verwende ich es bereits in einer der Seitenleisten meines Admin-Panels.

231
user3931708

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

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

Wenn Sie es für andere Zwecke verwenden möchten, erstellen Sie in Ihrem eigenen CSS mit bootstrap.css ein anderes:

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

Da fand ich den Standard Bootstrap <hr/> Größe unansehnlich, hier ist einige einfache HTML und CSS, um das Element visuell auszugleichen:

HTML:

<hr class="half-rule"/>

CSS:

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