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

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 m'y attendais. Au lieu de dessiner une ligne, cela crée un espace, comme ceci:

la propriété css de <hr>sont:

hr {
  -moz-border-bottom-colors: none;
  -moz-border-image: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-color: #EEEEEE -moz-use-text-color #FFFFFF;
  border-style: solid none;
  border-width: 1px 0;
  margin: 18px 0;
}

Il correspond à une ligne horizontale de 1px avec une marge grise très claire et verticale de 18px.

et comme se <hr>trouve à l'intérieur d'une <div>classe sans, la largeur dépend du contenu du<div>

si vous souhaitez que le <hr>soit en pleine largeur, remplacez-le <div>par <div class='row'><div class='span12'>(avec les balises de fermeture correspondantes).

Si vous vous attendez à quelque chose de différent, décrivez ce que vous attendez en ajoutant un commentaire.

Au lieu d'écrire

<hr>

Écrire

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

Et il affichera la pleine largeur comme d'habitude.

J'ai résolu cela en définissant la couleur d'arrière-plan HR sur noir comme ceci:

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

C'est parce que le CSS DEFAULT de Bootstrap pour <hr />est:

hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eeeeee;
}

cela crée un écart de 40 pixels entre ces deux lignes

donc si vous voulez changer un <hr />style de marge particulier dans votre page, vous pouvez essayer quelque chose comme ceci:

<hr style="margin-bottom:5px !important; margin-top:5px !important; " />

si vous souhaitez modifier l'apparence / d'autres styles de <hr /> votre page, comme la couleur et le type de bordure ou l'épaisseur, vous pouvez essayer quelque chose comme:

<hr style="border-top: 1px dotted #000000 !important; " />

pour tous <hr />dans votre page

<style>
   hr {
       border-top: 1px dotted #000000 !important;
       margin-bottom:5px !important; 
       margin-top:5px !important;
   }
</style>

Par défaut, l' hrélément du fichier CSS Twitter Bootstrap a une marge supérieure et inférieure de 18px. C'est ce qui crée un écart. Si vous voulez que l'écart soit plus petit, vous devrez ajuster la propriété de marge de l' hrélément.

Dans votre exemple, faites quelque chose comme ceci:

.container hr {
margin: 2px 0;
}

Je pense que ce serait mieux si nous ajoutions une couleur de bordure: 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 toujours bon.

J'ai pu personnaliser le hrTag en modifiant le style en ligne en tant que 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; c'est aussi une couleur grise plus foncée. Le code bootstrap est en fait très flexible. Comme le montre l'extrait de code ci-dessus, vous pouvez utiliser un style en ligne ou votre propre code personnalisé. J'espère que cela aide quelqu'un.

Vous voudrez peut-être l'un de ceux-ci, donc pour correspondre à la disposition 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 DIVélément de grille inclus, la disposition peut freiner sur différents appareils.