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

98

Je sais qu'il y Bootstrap 3a un diviseur horizontal que vous pouvez placer à l'intérieur des 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 le faire sans que cela soit dans une liste déroulante, comme le mettre dans une liste ou un menu similaire?

twitter-bootstrap twitter-bootstrap-3

— KeplerIO
source

241

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

— vog
source

3

<hr />c'est encore mieux.

— Erwin Mayer

21

@ErwinMayer <hr />est pour XHTML. En HTML 4 ou 5 c'est juste<hr>

— Dave

1

C'est une vieille réponse, mais pour ceux qui sont tombés ici comme moi, <hr> ne devrait pas être utilisé à des fins de présentation comme dans le cas OP. C'est pour le changement thématique dans les paragraphes. Tout comme il ne faut pas utiliser la balise P pour formater les contrôles.

— KMC le

16

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

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

Si vous le souhaitez pour une autre utilisation, dans votre propre css, en suivant le fichier 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;
}

— Christina
source

5

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

HTML:

<hr class="half-rule"/>

CSS:

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

— David Metcalfe
source