La balise <hr> dans Twitter Bootstrap ne fonctionne pas correctement ?

Question

Voici mon code :

<div class="container">
<div>
<h1>Welcome TeamName1</h1>
  asdf
  <hr>
  asdf

</div>
</div> <!-- /container -->

La balise hr ne semble pas fonctionner comme je l'attendrais. Au lieu de dessiner une ligne, elle crée un espace, comme ceci :

Answer 1

Je pense que cela serait mieux si nous ajoutons border-color : transparent comme ci-dessous :

<hr style="width: 100%; background-color: black; height: 1px; border-color : transparent;" />

Si vous ne mettez pas la bordure transparente, elle sera blanche et je ne pense pas que ce soit bon en permanence.

Answer 2

J'ai pu personnaliser le hrTag en modifiant le style en ligne comme tel :

<div class="row"> <!-- You can also position the row if need be. -->
<div class="col-md-12 col-lg-12"><!-- set width of column I wanted mine to stretch most of the screen-->
<hr style="min-width:85%; background-color:#a1a1a1 !important; height:1px;"/>
</div>
 </div>

Le hrTag est maintenant plus épais et plus visible ; il est également d'une couleur grise plus foncée. Le code du bootstrap est en fait très flexible. Comme le montre l'extrait ci-dessus, vous pouvez utiliser le style en ligne ou votre propre code personnalisé. J'espère que cela aidera quelqu'un.

Answer 3

Vous pouvez en vouloir un, afin de correspondre à la mise en page Bootstrap :

<div class="col-xs-12">
    <hr >
</div>

<!-- or -->

<div class="col-xs-12">
    <hr style="border-style: dashed; border-top-width: 2px;">
</div>

<!-- or -->

<div class="col-xs-12">
    <hr class="col-xs-1" style="border-style: dashed; border-top-width: 2px;">
</div>

Sans un DIV L'élément de grille inclus, la mise en page peut être freinée sur différents appareils.