Text-align Klasse für innerhalb einer Tabelle

Question

Gibt es eine Reihe von Klassen im Bootstrap-Framework von Twitter, die Text ausrichten?

Ich habe zum Beispiel einige Tabellen mit $ Summen, die ich rechts ausgerichtet haben möchte...

<th class="align-right">Total</th>

und

<td class="align-right">$1,000,000.00</td>

Answer 1

Bootstrap 3

v3 Textausrichtung Docs

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

---

Bootstrap 4

v4 Textausrichtung Docs

<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>

---

Bootstrap 5

v5 Dokumente zur Textausrichtung

text-left wurde ersetzt durch text-start , text-right wurde ersetzt durch text-end

<p class="text-start">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-end">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Answer 2

Verwendung von Bootstrap 3.x mit text-right funktioniert perfekt:

<td class="text-right">
  text aligned
</td>

Answer 3

Nein, Bootstrap hat keine Klasse dafür, aber diese Art von Klasse wird als "Utility"-Klasse betrachtet, ähnlich wie die von @anton erwähnte ".pull-right"-Klasse.

Wenn Sie sich die utilities.less ansehen, werden Sie nur sehr wenige Utility-Klassen in Bootstrap sehen. Der Grund dafür ist, dass diese Art von Klassen im Allgemeinen verpönt ist und nur für folgende Zwecke verwendet werden sollte: a) für das Prototyping und die Entwicklung - damit Sie Ihre Seiten schnell aufbauen können und dann die pull-right- und pull-left-Klassen zugunsten der Anwendung von Floats auf semantischere Klassen oder auf die Elemente selbst entfernen können, oder b) wenn es eindeutig praktischer ist als eine semantischere Lösung.

In Ihrem Fall sieht es nach Ihrer Frage so aus, als ob Sie einen bestimmten Text in Ihrer Tabelle rechts ausrichten möchten, aber nicht den gesamten Text. Semantisch wäre es besser, etwas zu tun wie (ich werde nur ein paar Klassen hier, mit Ausnahme der Standard-Bootstrap-Klasse, .table):

  <table class="table price-table">
    <thead>
      <th class="price-label">Total</th>
    </thead>
    <tbody>
      <tr>
        <td class="price-value">$1,000,000.00</td>
      </tr>
    </tbody>
  </table>

Und wenden Sie einfach die text-align: left o text-align: right Deklarationen zu den Preis-Wert- und Preis-Etikett-Klassen (oder anderen Klassen, die für Sie geeignet sind).

Das Problem bei der Anwendung align-right als Klasse ist, dass Sie, wenn Sie Ihre Tabellen umgestalten wollen, das Markup und die Stile neu erstellen müssen. Wenn Sie semantische Klassen verwenden, können Sie möglicherweise mit einer Umstrukturierung nur des CSS-Inhalts auskommen. Und wenn Sie sich die Zeit nehmen, einem Element eine Klasse zuzuweisen, sollten Sie versuchen, dieser Klasse einen semantischen Wert zuzuweisen, damit das Markup für andere Programmierer (oder für Sie selbst drei Monate später) leichter zu navigieren ist.

Man kann sich das so vorstellen: Wenn Sie die Frage stellen: "Wofür ist dieses td?", wird die Antwort "rechts ausrichten" keine Klarheit bringen.

Answer 4

Bootstrap 2.3 hat Utility-Klassen text-left , text-right y text-center aber sie funktionieren nicht in Tabellenzellen. Bis Bootstrap 3.0 veröffentlicht wird (wo sie das Problem behoben haben) und ich in der Lage bin, den Wechsel zu machen, habe ich dies zu meiner Website CSS, die nach geladen wird hinzugefügt bootstrap.css :

.text-right {
    text-align: right !important;
}

.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

Answer 5

Fügen Sie einfach ein "eigenes" Stylesheet hinzu, das nach dem Stylesheet von Bootstrap geladen wird. So werden die Klassendefinitionen überladen.

In diesem Stylesheet wird die Ausrichtung wie folgt deklariert:

.table .text-right {text-align: right}
.table .text-left {text-align: left}
.table .text-center {text-align: center}

Jetzt können Sie die "üblichen" Ausrichtungskonventionen für td- und th-Elemente verwenden.