Przegroda pozioma Bootstrap 3 (nie na liście rozwijanej)

98

Wiem, że Bootstrap 3ma poziomy rozdzielacz, który możesz umieścić w menu rozwijanych, aby oddzielić linki w ten sposób:

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

Moje pytanie brzmi: czy istnieje sposób na zrobienie tego bez rozwijania go, na przykład umieszczenie go na jakiejkolwiek liście lub podobnym menu?

twitter-bootstrap twitter-bootstrap-3

— KeplerIO
źródło

241

Tak, możesz po prostu umieścić <hr>swój kod tam, gdzie chcesz, już go używam na jednym z bocznych pasków mojego panelu administracyjnego.

— vog
źródło

3

<hr />jest jeszcze lepszy.

— Erwin Mayer

21

@ErwinMayer <hr />jest dla XHTML. W HTML 4 lub 5 jest po prostu<hr>

— Dave

1

To stara odpowiedź, ale dla tych, którzy natknęli się tutaj tak jak ja, <hr> nie powinno być używane do celów prezentacji, jak w przypadku OP. Służy do zmiany tematycznej w akapitach. Tak jak nie powinno się używać znacznika P do formatowania kontrolek.

— KMC

16

Obecnie działa tylko dla .dropdown-menu:

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

Jeśli chcesz go do innego użytku, we własnym css, po pliku bootstrap.css utwórz kolejny:

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

— Christina
źródło

5

Ponieważ uważam, że domyślny <hr/>rozmiar Bootstrap jest brzydki, oto kilka prostych HTML i CSS, aby zrównoważyć wizualnie element:

HTML:

<hr class="half-rule"/>

CSS:

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

— David Metcalfe
źródło