Wie kann ich Text links und rechts von meinem Panel-Titel hinzufügen?
Lesezeit: 6 Minuten
Ich verwende Twitter Bootstrap, um mir einen Großteil der CSS-Arbeit abzunehmen. Ich möchte ihre Panels für eine Art “Beitrag” eines Benutzers verwenden. Ich möchte, dass der Abschnitt „Titel“ Hyperlinks zum Bearbeiten/Löschen auf der RECHTEN Seite des Titels enthält, während der Titel selbst auf der linken Seite ausgerichtet ist.
Der Titel sollte links ausgerichtet sein (wie es standardmäßig der Fall ist), aber ich möchte, dass der zusätzliche Text „Hey“ auf der RECHTEN Seite angezeigt wird.
haben Sie versucht, clear: rechts auf dem Titel zu verwenden
– Hive7
21. August 2013 um 8:59 Uhr
Fügen Sie den Code des Panel-Titels und den Text-Rechts-Klassencode ein. und versuchen Sie, float:right in der Text-Right-Klasse hinzuzufügen.
– Devang Rathod
21. August 2013 um 9:00 Uhr
Dipesch Parmar
Twitter Bootstrap hat zwei Klassen, die Ihnen helfen können.
Erstens ist .text-right und zweitens ist .pull-right Fügen Sie also diese beiden Klassen hinzu und sehen Sie.
weil nach rechts ziehen tatsächlich das gesamte Element nach rechts schwebt … wo als Textausrichtung nur Text in einer bestimmten Breite des Elements nach rechts gesetzt wird.
– Dipesh Parmar
21. August 2013 um 9:18 Uhr
Ich hasse Float, aber das scheint der beste Weg zu sein, den ich bisher gefunden habe 🙁
– LinuxDan
25. August 2014 um 19:41 Uhr
Bitte übernehmen Sie auch den Clearfix von @Pangur . Ohne dass die Elemente, die gezogen wurden, auch halb im Körperteil waren
– D4rth B4n3
22. August 2016 um 12:50 Uhr
Dies führte dazu, dass der Hintergrund bei mir nicht funktionierte. @Camille Row Version hat bei mir perfekt funktioniert!
– Michael Ciechan
9. März 2017 um 22:47 Uhr
Pangur
sehr klein clearfix macht es
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title pull-left">
Works fine for me!
</div>
<div class="panel-title pull-right">Text on the right</div>
<div class="clearfix"></div>
</div>
<div class="panel-body">Panel content</div>
</div>
Danke für den Clearfix-Treffer. das Layout war ohne es wirklich doof 😀
– D4rth B4n3
22. August 2016 um 12:48 Uhr
Hinzufügen float:right und entfernen text-align: right
.text-right {
float:right;
}
Mach das nicht! Sie möchten (fast) nie im Quellcode einer anderen Bibliothek arbeiten. Schauen Sie stattdessen, ob etwas bereits existiert, und erstellen Sie andernfalls Ihre eigene Klasse. In diesem Fall ist die .pull-right Klasse existiert bereits, die genau das tut, was Sie gemacht haben .text-right tun.
Ich denke das kann auch helfen. Sie können sowohl Bootstrap-Zeilen als auch -Spalten verwenden, um das Panel in zwei Teile zu teilen, wie ich es hier getan habe:
haben Sie versucht, clear: rechts auf dem Titel zu verwenden
– Hive7
21. August 2013 um 8:59 Uhr
Fügen Sie den Code des Panel-Titels und den Text-Rechts-Klassencode ein. und versuchen Sie, float:right in der Text-Right-Klasse hinzuzufügen.
– Devang Rathod
21. August 2013 um 9:00 Uhr