web-dev-qa-db-fra.com

Bootstrap 3 Diviseur horizontal (pas dans une liste déroulante)

Je sais que Bootstrap 3 a un séparateur horizontal que vous pouvez placer dans les menus déroulants pour séparer les liens comme celui-ci:

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

Ma question est la suivante: Y a-t-il un moyen de faire cela sans qu'il soit dans un menu déroulant, comme de le mettre dans une liste ou un menu similaire?

twitter-bootstraptwitter-bootstrap-3
94
KeplerIO

Oui, vous pouvez simplement mettre <hr /> dans votre code où vous le voulez, je l'utilise déjà dans l'une des barres latérales de mon panneau d'administration.

231
user3931708

Actuellement, cela ne fonctionne que pour le .dropdown-menu:

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

Si vous le souhaitez pour un autre usage, dans votre propre css, en suivant le bootstrap.css, créez-en un autre:

.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

Comme j'ai trouvé la taille inesthétique de la taille Bootstrap <hr/> par défaut, voici quelques exemples de code HTML et CSS simples pour équilibrer l'élément visuellement:

HTML:

<hr class="half-rule"/>

CSS:

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