Update 2018 ...
Bootstrap 4.1+
pull-right
ist jetzt float-right
text-right
ist dasselbe wie 3.x und funktioniert für Inline-Elemente
- beide
float-*
und text-*
sind reaktions für unterschiedliche Ausrichtung in unterschiedlichen Breiten (dh float-sm-right
)
Die Flexbox-Utensilien (zB :) justify-content-between
können auch zur Ausrichtung verwendet werden:
<div class="d-flex justify-content-between">
<div>
left
</div>
<div>
right
</div>
</div>
oder automatische Ränder (z. B. ml-auto
:) in einem beliebigen Flexbox-Container (Zeile, Navigationsleiste, Karte, D-Flex usw.)
<div class="d-flex">
<div>
left
</div>
<div class="ml-auto">
right
</div>
</div>
Bootstrap 4 Align Demo
Bootstrap 4 Right Align Beispiele (float, flexbox, text-right, etc ...)
Bootstrap 3
Verwenden Sie die pull-right
Klasse ..
<div class="container">
<div class="row">
<div class="col-md-6">Total cost</div>
<div class="col-md-6"><span class="pull-right">$42</span></div>
</div>
</div>
Bootstrap 3 Demo
Sie können die text-right
Klasse auch folgendermaßen verwenden :
<div class="row">
<div class="col-md-6">Total cost</div>
<div class="col-md-6 text-right">$42</div>
</div>
Bootstrap 3 Demo 2
text-right
hat bei mir funktioniert.Anstatt
pull-right
Klasse zu verwenden, ist es besser,text-right
Klasse in der Spalte zu verwenden, da diespull-right
manchmal zu Problemen beim Ändern der Seitengröße führt.quelle
In Bootstrap 4 besteht die richtige Antwort darin, dietext-xs-right
Klasse zu verwenden.Dies funktioniert, weilxs
die kleinste Ansichtsfenstergröße in BS angegeben wird. Wenn Sie möchten, können Sie die Ausrichtung nur anwenden, wenn das Ansichtsfenster mittel oder größer isttext-md-right
.In der neuesten Alpha
text-xs-right
wurde vereinfachttext-right
.quelle
Bootstrap v4 bietet Flexbox-Unterstützung
Weitere Informationen finden Sie unter https://v4-alpha.getbootstrap.com/utilities/flexbox/
quelle
Wir können durch Bootstrap 4 Flexbox erreichen:
Beispiel: JSFiddle
quelle
Das sollte den Job einfach ok machen
quelle