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

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 un gris très clair et une marge verticale de 18px.

et parce que <hr> est à l'intérieur d'un <div> sans classe, la largeur dépend du contenu de l'écran. <div>

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

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

Answer 2

Au lieu d'écrire

<hr>

Écrire à

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

Et il s'affichera en pleine largeur comme d'habitude.

Answer 3

J'ai résolu ce problème en définissant la couleur d'arrière-plan des RH comme suit : noir :

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

Answer 4

C'est parce que la méthode Bootstrap CSS PAR DÉFAUT pour <hr /> est : :

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

cela crée un espace de 40px entre ces deux lignes

donc si vous voulez changer un élément particulier <hr /> dans votre page, vous pouvez essayer quelque chose comme ceci : :

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

si vous voulez changer l'apparence/les autres styles d'un certain <hr /> dans votre page comme la couleur et le type ou l'épaisseur de la bordure, 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>

Answer 5

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

Dans votre exemple, faites quelque chose comme ceci :

.container hr {
margin: 2px 0;
}