it-swarm.com.de

Bootstrap - Textausrichtungsklasse für eine Tabelle

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

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

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

und

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

Bootstrap 3

v3 Text Alignment 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 3 text align example

Bootstrap 4

v4 Text Alignment 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 4 text align example

1356

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

<td class="text-right">
  text aligned
</td>
72
Paolo Casciello

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 Sie in Bootstrap nur sehr wenige Utility-Klassen sehen. Der Grund dafür ist, dass diese Art von Klasse im Allgemeinen verpönt ist und für folgende Zwecke empfohlen wird: a) Prototyping und Entwicklung - damit Sie schnell bauen können 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 einen bestimmten Text in Ihrer Tabelle rechts ausrichten möchten, aber nicht alle. Semantisch wäre es besser, etwas zu tun (ich werde hier nur ein paar Klassen zusammenstellen, mit Ausnahme der Standardklasse bootstrap, .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 text-align: left- oder text-align: right -Deklarationen auf die Preis-Wert- und Preisschild-Klassen an (oder welche Klassen auch immer für Sie funktionieren).

Das Problem beim Anwenden von align-right als 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 nicht nur den CSS-Inhalt umgestalten. Wenn Sie sich die Zeit nehmen, um 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, wird die Antwort "rechts ausrichten" keine Erklärung liefern.

47
jonschlinkert

Bootstrap 2.3 verfügt über Dienstprogrammklassen text-left, text-right und text-center, sie funktionieren jedoch nicht in Tabellenzellen. Bis Bootstrap 3.0 veröffentlicht wird (wo sie das Problem behoben haben) und ich in der Lage bin, den Wechsel vorzunehmen, habe ich dies meinem Site-CSS hinzugefügt, das nach bootstrap.css geladen wird:

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

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

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

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

In diesem Stylesheet deklarieren Sie 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.

26
Michael

Ich vermute, weil CSS bereits text-align:right, AFAIK, Bootstrap hat, keine spezielle Klasse dafür.

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

Bootstrap 2.3 kam gerade heraus und fügte Textausrichtungsstile hinzu:

Bootstrap 2.3 veröffentlicht (2013-02-07)

23
Anton

Bootstrap 4 kommt ! Die in Bootstrap _3.x_ bekannten Dienstprogrammklassen sind jetzt für Haltepunkte aktiviert. Die Standard-Haltepunkte sind: xs, sm, md, lg und xl, daher sehen diese Textausrichtungsklassen wie _.text-[breakpoint]-[alignnment]_ aus.

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

Wichtig: Zum jetzigen Zeitpunkt ist Bootstrap 4 nur in Alpha 2. Diese Klassen und ihre Verwendung unterliegen Änderung ohne Vorankündigung.

15
dKen

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

12
Gothburz

Die folgenden Codezeilen funktionieren ordnungsgemäß. Sie können die Klassen wie text-center, left oder right 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 Klassen Bootstrap und haben ihre eigene Eigenschaft.

11
Vanshaj Rai

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 */
10
kushal kant

Die .text-align -Klasse ist vollständig gültig und besser verwendbar als die Klassen .price-label und .price-value, die nicht mehr von Nutzen sind.

Ich empfehle 100% mit einer benutzerdefinierten Utility-Klasse 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;
}
8
Bart Calixto

Mit dem Release von Bootstrap 3 können Sie die Klassen von text-center für die mittlere Ausrichtung, text-left für die linke Ausrichtung, text-right für die rechte Ausrichtung und text-justify für eine gerechtfertigte Ausrichtung.

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

5
Jordan D. Angus

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

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

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

Wir haben dafür fünf Klassen, auf die Sie sich hier beziehen 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>
3
Ganesh Putta

Hier ist die einfachste Lösung

Sie können die Klassen wie text-center, left oder right zuweisen. Der Text wird entsprechend diesen Klassen ausgerichtet. Sie müssen Klassen nicht separat erstellen. Diese Klassen sind in BootStrap 3 eingebaut

    <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

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

In diesen drei Klassen Bootstrap ungültige Klasse

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

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

 .text-left {
    text-align: left; }
0
Ashu Designer