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

93

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:

twitter-bootstrap

— Henry Henrinson
quelle

140

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.

— Taufe
quelle

3

Vielen Dank! Ich wusste nicht, dass Sie das <hr> in ein <div> einfügen müssen. Seltsam.

— Kyle Carlson

3

Ich gehe davon aus, dass span12 in den letzten zwei Jahren irgendwann aus Bootstrap entfernt wurde, weil ich es nicht habe, aber es hat für mich funktioniert, meinen Körperinhalt und die horizontale Regel in Zeilenklassen zu setzen.

— Casey

1

Fix border-color: #EEEEEE -moz-use-text-color #FFFFFF;mit nurborder-color: #EEEEEE;

— Slowaways

2

span12 wurde durch col-sm-12 ersetzt

— M_Griffiths

Dieser Teil Ihres Codes ( border-width: 1px 0;) verursacht eine 2pxhorizontale Linie! Sie sollten es ändern in: border-width: 1px 0 0 0;um eine 1pxhorizontale Linie zu erstellen.

— RAM

39

Anstatt zu schreiben

<hr>

Schreiben

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

Und es wird wie gewohnt in voller Breite angezeigt.

— Hotpot
quelle

4

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

— Drzymala

Dies ist die eleganteste Lösung für Bootstrap, danke!

— Christopher Bales

<hr class="w-100">scheint eine selbstverständlichere Methode zum Einstellen der Breite zu sein.

— Robobenklein

38

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

— James K.
quelle

4

Dies löst das Problem nicht genau, eher wie ein Hack ... Es gibt viele bessere Möglichkeiten, das Bootstrap-Styling zu überschreiben als mit einem Inline-Style.

— IonicBurger

1

Bitte erläutern Sie @DjangoBurger und teilen Sie Ihre Lösung.

— James K

1

Ich denke, @DjangoBurger beschwert sich hauptsächlich über Inline-Stile. Sie hätten diesen Stil in eine Klasse einfügen und hier den Klassennamen zuweisen können. Ich habe Ihre Lösung auf diese Weise für meinen eigenen Gebrauch modifiziert. Vielen Dank!

— Dreamerkumar

Einverstanden - das ist ein elegantes Mittel :)

— James K

Funktioniert perfekt! Ich benutze Bootstrap und irgendwie war mein <hr> ungewöhnlich - es war transparent und nicht klar zu sehen.

17

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>

— Ritabrata Gautam
quelle

5

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

— Finspin
quelle

3

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.

— Asu13
quelle

2

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.

— Nenn mich Andy
quelle