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>
Les .text-align Klasse ist absolut gültig und brauchbarer als eine .price-label y .price-value die nicht mehr von Nutzen sind.
Ich empfehle, zu 100 % mit einer benutzerdefinierten Utility-Klasse namens
.text-right {
text-align: right;
}Ich mag es, ein bisschen zu zaubern, aber das liegt ganz bei dir:
span.pull-right {
float: none;
text-align: right;
}
Hier ist eine kurze und knappe 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>
Mit der Veröffentlichung von Bootstrap 3 können Sie die Klassen von text-center für die mittige Ausrichtung, text-left für die linke Ausrichtung, text-right für die richtige Ausrichtung und text-justify für eine gerechtfertigte Ausrichtung.
Bootstrap ist ein sehr einfaches Frontend-Framework, mit dem man arbeiten kann, sobald man es benutzt. Außerdem lässt es sich sehr leicht an die eigenen Bedürfnisse anpassen.
Ausweitung der Davids Antwort Ich füge einfach eine einfache Klasse hinzu, um Bootstrap wie folgt zu erweitern:
.money, .number {
text-align: right !important;
}
v5 Dokumente zur Textausrichtung
In Bootstrap Version 5 wurden die Klassen für die Textausrichtung geändert. Verwenden Sie die folgenden neuen Klassen zum Ausrichten von Text:
text-start für die linke Ausrichtung.text-center für die mittige Ausrichtung.text-end für die richtige Ausrichtung.Diese Klassen können auch innerhalb von Tabellen verwendet werden. So richten Sie Text innerhalb einer Zelle rechts aus
<td class="text-end">$1,000.00</td>Wenn Sie den Text innerhalb einer ganzen Spalte rechts ausrichten möchten, können Sie css verwenden nth-child Eigenschaft
/* || right aligns text of third column; change 3 to your desired column number*/
tr > th:nth-child(3),
tr > td:nth-child(3) {
text-align: right;
}Siehe untenstehendes Beispiel für eine vollständige Lösung
/* to right align text within whole column */
.custom-table tr>th:nth-child(3),
.custom-table tr>td:nth-child(3) {
text-align: right;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<body>
<table class="table table-bordered custom-table">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Customer</th>
<th scope="col">Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>11 May 2021</td>
<td>Paula Allen</td>
<td>$104.98</td>
</tr>
<tr>
<td>10 May 2021</td>
<td class="text-end">Kevin(right-align)</td>
<td>$233.00</td>
</tr>
<tr>
<td>09 May 2021</td>
<td>Joyes Murray</td>
<td>$170.25</td>
</tr>
</tbody>
</table>
</body> CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
