Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie kann ich Text in einer Tabelle mithilfe von Bootstrap-CSS-Klassen ausrichten?

Mary-Kate Olsen
Freigeben: 2024-11-02 03:01:02
Original
696 Leute haben es durchsucht

How Can I Align Text Inside a Table Using Bootstrap CSS Classes?

So richten Sie Text in einer Tabelle mithilfe von CSS-Klassen aus

Das Bootstrap-Framework von Twitter bietet einen robusten Satz von CSS-Klassen zum Ausrichten von Text in HTML-Elementen . Diese Klassen können auf Tabellenelemente angewendet werden, um die gewünschte Ausrichtung zu erreichen.

Bootstrap 3

Für Bootstrap 3 können die folgenden Klassen verwendet werden, um Text innerhalb von Tabellenzellen auszurichten :

  • .text-left: Linksbündiger Text
  • .text-center: Mittenbündiger Text
  • .text-right: Rechtsbündiger Text

Beispiel:

<code class="html"><th class="text-right">Total</th>
<td class="text-right">,000,000.00</td></code>
Nach dem Login kopieren

Bootstrap 4

Bootstrap 4 führt eine detailliertere Kontrolle über die Textausrichtung ein und ermöglicht so Sie können unterschiedliche Ausrichtungen für unterschiedliche Ansichtsfenstergrößen angeben. Die folgenden Klassen sind verfügbar:

  • .text-xs-left: Linksbündiger Text in allen Ansichtsfenstergrößen
  • .text-xs-center: Mittig ausgerichteter Text in allen Ansichtsfenstern Größen
  • .text-xs-right: Rechtsbündiger Text in allen Ansichtsfenstergrößen
  • .text-sm-left: Linksbündiger Text in Ansichtsfenstern der Größe SM (klein) oder breiter
  • .text-md-left: Linksbündiger Text in Ansichtsfenstern mit der Größe MD (mittel) oder größer
  • .text-lg-left: Linksbündiger Text in Ansichtsfenstern mit der Größe LG (groß) oder größer
  • .text-xl-left: Linksbündiger Text in Ansichtsfenstern der Größe XL (extragroß) oder breiter

Bootstrap 5

In Bootstrap 5 wurde .text-left durch .text-start und .text-right durch .text-end ersetzt. Ansonsten bleiben die Ausrichtungsoptionen gleich.

Das obige ist der detaillierte Inhalt vonWie kann ich Text in einer Tabelle mithilfe von Bootstrap-CSS-Klassen ausrichten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!