<hr> -Tag in Twitter Bootstrap funktioniert nicht richtig?

Hier ist mein Code:

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

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

Das hr-Tag scheint nicht so zu funktionieren, wie ich es erwarten würde. Anstatt eine Linie zu zeichnen, entsteht eine Lücke wie folgt:

Die CSS-Eigenschaft von <hr>sind:

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

Es entspricht einer horizontalen Linie von 1 Pixel mit einem sehr hellgrauen und vertikalen Rand von 18 Pixel.

und weil <hr>es sich innerhalb einer <div>Klasse ohne Klasse befindet, hängt die Breite vom Inhalt der Klasse ab<div>

Wenn Sie möchten <hr>, dass die Breite in voller Breite ist, ersetzen Sie sie <div>durch <div class='row'><div class='span12'>(durch entsprechende schließende Tags).

Wenn Sie etwas anderes erwarten, beschreiben Sie, was Sie erwarten, indem Sie einen Kommentar hinzufügen.

Anstatt zu schreiben

<hr>

Schreiben

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

Und es wird wie gewohnt in voller Breite angezeigt.

Ich habe dies gelöst, indem ich die HR-Hintergrundfarbe wie folgt auf Schwarz gesetzt habe:

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

Dies liegt daran, dass Bootstraps DEFAULT CSS für <hr />:: lautet.

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

Es entsteht eine 40px Lücke zwischen diesen beiden Linien

Wenn Sie also einen bestimmten <hr />Randstil auf Ihrer Seite ändern möchten, können Sie Folgendes versuchen:

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

Wenn Sie das Erscheinungsbild / andere Stile einer bestimmten <hr /> Seite wie Farbe, Randtyp oder Dicke ändern möchten, können Sie Folgendes ausprobieren:

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

für alle <hr />auf Ihrer Seite

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

Standardmäßig hat das hrElement in der Twitter Bootstrap CSS-Datei einen oberen und unteren Rand von 18px. Das schafft eine Lücke. Wenn die Lücke kleiner sein soll, müssen Sie die Randeigenschaft des hrElements anpassen .

Führen Sie in Ihrem Beispiel Folgendes aus:

.container hr {
margin: 2px 0;
}

Ich denke, es würde besser aussehen, wenn wir die Randfarbe hinzufügen: transparent wie unten:

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

Wenn Sie den Rand nicht transparent machen, wird er weiß und ich denke nicht, dass das immer gut ist.

Ich konnte das hrTag anpassen, indem ich das Inline-Styling als solches bearbeitete:

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

Der hrTag ist jetzt dicker und sichtbarer. Es ist auch eine dunklere graue Farbe. Der Bootstrap-Code ist eigentlich sehr flexibel. Wie das obige Snippet zeigt, können Sie Inline-Styling oder Ihren eigenen benutzerdefinierten Code verwenden. Hoffe das hilft jemandem.