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

93

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:

twitter-bootstrap

— Henry Henrinson
source

140

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.

— baptme
source

3

Merci! Je n'avais pas réalisé que vous deviez inclure le <hr> à l'intérieur d'un <div>. Impair.

— Kyle Carlson le

3

Je suppose que span12 a été supprimé de Bootstrap à un moment donné au cours des deux dernières années parce que je ne l'ai pas, mais mettre le contenu de mon corps et la règle horizontale dans les classes de lignes a fonctionné pour moi.

— Casey

1

correction border-color: #EEEEEE -moz-use-text-color #FFFFFF;avec seulementborder-color: #EEEEEE;

— Slowaways

2

span12 a été remplacé par col-sm-12

— M_Griffiths

Cette partie de votre code ( border-width: 1px 0;) provoque une 2pxligne horizontale! Vous devriez le changer en: border-width: 1px 0 0 0;pour créer une 1pxligne horizontale.

— RAM

39

Au lieu d'écrire

<hr>

Écrire

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

Et il affichera la pleine largeur comme d'habitude.

— Pot chaud
source

4

<div class="w-100"><hr></div>

— drzymala

C'est la solution la plus élégante pour Bootstrap, merci!

— Christopher Bales

<hr class="w-100">semble être une méthode plus évidente pour définir la largeur.

— Robobenklein

38

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;" />

— James K
source

4

Cela ne résout pas exactement le problème, plus comme un hack ... Il existe de nombreuses meilleures façons de contourner le style bootstrap qu'avec un style en ligne.

— IonicBurger

1

Veuillez élaborer @DjangoBurger et partager votre solution.

— James K

1

Je pense que @DjangoBurger se plaint principalement des styles en ligne. Vous auriez pu mettre ce style dans une classe et attribuer le nom de classe ici. J'ai modifié votre solution de cette façon pour mon propre usage, alors merci!

— dreamerkumar

D'accord - c'est un remède élégant :)

— James K

Fonctionne parfaitement! J'utilise bootstrap et d'une manière ou d'une autre mon <hr> était inhabituel - c'était transparent et pas clairement vu.

17

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>

— Ritabrata Gautam
source

5

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;
}

— aileron
source

3

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.

— Asu13
source

2

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.

— Appelle moi Andy
source

0

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.

— F8ER
source