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

Zum Beispiel habe ich einige Tabellen mit $Summen, die ich rechts ausrichten möchte ...

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

und

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

Bootstrap 3

v3 Textausrichtungsdokumente

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

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

Die Verwendung von Bootstrap 3.x text-rightfunktioniert einwandfrei:

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

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

Wenn Sie sich utilities.less ansehen, werden in Bootstrap nur sehr wenige Utility-Klassen angezeigt. Der Grund dafür ist, dass diese Art von Klasse im Allgemeinen verpönt ist und empfohlen wird, entweder für: a) Prototyping und Entwicklung verwendet zu werden, damit Sie schnell erstellen können Entfernen Sie Ihre Seiten und entfernen Sie dann die Pull-Right- und Pull-Left-Klassen, um Floats auf semantischere Klassen oder auf die Elemente selbst anzuwenden, oder b) wenn dies eindeutig praktischer ist als eine semantischere Lösung.

In Ihrem Fall sieht es nach Ihrer Frage so aus, als ob Sie möchten, dass bestimmter Text rechts in Ihrer Tabelle ausgerichtet wird, aber nicht der gesamte. Semantisch wäre es besser, so etwas zu tun (ich werde hier nur ein paar Klassen zusammenstellen, 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>

Wenden Sie einfach die Deklarationen text-align: leftoder text-align: rightauf die Preis-Wert- und Preis-Label-Klassen an (oder welche Klassen auch immer für Sie arbeiten).

Das Problem bei der Anwendung align-rightals Klasse besteht darin, dass Sie das Markup und die Stile wiederholen müssen, wenn Sie Ihre Tabellen umgestalten möchten. Wenn Sie semantische Klassen verwenden, können Sie möglicherweise nur den CSS-Inhalt umgestalten. Wenn Sie sich die Zeit nehmen, eine Klasse auf ein Element anzuwenden, empfiehlt es sich, dieser Klasse einen semantischen Wert zuzuweisen, damit das Markup für andere Programmierer (oder Sie drei Monate später) einfacher zu navigieren ist.

Eine Möglichkeit, sich das vorzustellen, ist folgende: Wenn Sie die Frage "Wofür ist das?" Stellen, erhalten Sie keine Klarstellung aus der Antwort "rechts ausrichten".

Bootstrap 2.3 hat Utility - Klassen text-left, text-rightund text-center, aber sie funktionieren nicht in Tabellenzellen. Bis Bootstrap 3.0 veröffentlicht wird (wo das Problem behoben wurde) und ich den Wechsel vornehmen kann, habe ich dies zu meinem Site-CSS hinzugefügt, das nach dem Laden geladen wird bootstrap.css:

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

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

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

Fügen Sie einfach ein "benutzerdefiniertes" Stylesheet hinzu, das nach dem Bootstrap-Stylesheet geladen wird. Die Klassendefinitionen sind also überladen.

Deklarieren Sie in diesem Stylesheet die Ausrichtung wie folgt:

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

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

Ich denke, weil CSS bereits text-align:rightAFAIK hat, hat Bootstrap keine spezielle Klasse dafür.

Bootstrap hat "Pull-Right" für schwebende Divs usw. auf der rechten Seite.

Bootstrap 2.3 ist gerade herausgekommen und hat Textausrichtungsstile hinzugefügt:

Bootstrap 2.3 veröffentlicht (07.02.2013)

Bootstrap 4 kommt ! Die in Bootstrap bekannten Dienstprogrammklassen 3.xsind jetzt für Haltepunkte aktiviert. Die Standardhaltepunkte sind: xs, sm, md, lgund xl, so dass diese Textausrichtung Klassen in etwa so aussehen .text-[breakpoint]-[alignnment].

<div class="text-sm-left"></div> //or
<div class="text-md-center"></div> //or
<div class="text-xl-right"></div>

Wichtig: Zum Zeitpunkt des Schreibens ist Bootstrap 4 nur in Alpha 2. Diese Klassen und ihre Verwendung können ohne vorherige Ankündigung geändert werden.

Bootstrap-Textausrichtung in Version 3.3.5:

 <p class="text-left">Left</p>
 <p class="text-center">Center</p>
 <p class="text-right">Right</p>

CodePen-Beispiel

Die folgenden Codezeilen funktionieren ordnungsgemäß. Sie können die Klassen wie Textmitte, links oder rechts zuweisen. Der Text wird entsprechend ausgerichtet.

<p class="text-center">Day 1</p> 
<p class="text-left">Day 2</p> 
<p class="text-right">Day 3</p>

Hier muss keine externe Klasse erstellt werden. Dies sind die Bootstrap-Klassen und haben ihre eigene Eigenschaft.

Sie können dieses CSS unten verwenden:

.text-right {text-align: right} /* For right align */
.text-left {text-align: left} /* For left align */
.text-center {text-align: center} /* For center align */

Die .text-alignKlasse ist absolut gültig und benutzerfreundlicher als eine .price-labelund .price-valuedie nicht mehr von Nutzen sind.

Ich empfehle 100% mit einer benutzerdefinierten Dienstprogrammklasse namens

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

Ich mag es etwas zu zaubern, aber das liegt an dir, wie etwas:

span.pull-right {
  float: none;
  text-align: right;
}

Hier ist eine kurze und süße Antwort mit einem Beispiel.

table{
    width: 100%;
}
table td, table th {
    border: 1px solid #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <table>
    <tr>
      <th class="text-left">Text align left.</th>
      <th class="text-center">Text align center.</th>
      <th class="text-right">Text align right.</th>
    </tr>
    <tr>
      <td class="text-left">Text align left.</td>
      <td class="text-center">Text align center.</td>
      <td class="text-right">Text align right.</td>
    </tr>
  </table>
</body>

Um Davids Antwort zu erweitern , füge ich einfach eine einfache Klasse hinzu, um Bootstrap wie folgt zu erweitern:

.money, .number {
    text-align: right !important;
}

Mit der Veröffentlichung von Bootstrap 3 können Sie die Klassen text-centerfür die Ausrichtung in der Mitte, text-left für die Ausrichtung nach links , für die Ausrichtung text-rightnach rechts und text-justifyfür eine gerechtfertigte Ausrichtung verwenden.

Bootstrap ist ein sehr einfaches Frontend-Framework, mit dem Sie arbeiten können, sobald Sie es verwenden. Sie sind nicht nur sehr einfach an Ihre Bedürfnisse anzupassen.

Wir haben fünf Klassen dafür, auf die Sie hier verweisen können: http://v4-alpha.getbootstrap.com/components/utilities/

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

Hier ist die einfachste Lösung

Sie können die Klassen wie Textmitte, links oder rechts zuweisen. Der Text wird entsprechend diesen Klassen ausgerichtet. Sie müssen keine Klassen separat erstellen. Diese Klassen sind in BootStrap 3 integriert

    <h1 class="text-center"> Heading 1 </h1> 
    <h1 class="text-left"> Heading 2 </h1> 
    <h1 class="text-right"> Heading 3 </h1>

Überprüfen Sie hier: Demo

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>

In Bootstrap Version 4. Es gibt einige eingebaute Klassen zum Positionieren von Text.

Zum Zentrieren von Tabellenkopf und Datentext:

 <table>
    <tr>
      <th class="text-center">Text align center.</th>
    </tr>
    <tr>
      <td class="text-center">Text align center.</td>
    </tr>
  </table>

Sie können diese Klassen auch verwenden, um beliebigen Text zu positionieren.

<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-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>

Für mehr Details

Hoffe es hilft dir.

In dieser drei Klassen Bootstrap ungültige Klasse

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

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

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

Verwenden Sie text-align:center !important. Es kann andere text-alignCSS-Regeln geben, daher !importantist dies wichtig.

table,
th,
td {
  color: black !important;
  border-collapse: collapse;
  background-color: yellow !important;
  border: 1px solid black;
  padding: 10px;
  text-align: center !important;
}

<table>
  <tr>
    <th>
      Center aligned text
    </th>
  </tr>
  <tr>
    <td>Center aligned text</td>
    <td>Center aligned text</td>
  </tr>
</table>