Links ausrichten und rechts ausrichten innerhalb eines div in Bootstrap

Question

Was sind einige der gängigen Möglichkeiten, um innerhalb eines Div-Containers in Bootstrap Text links auszurichten und anderen Text rechts auszurichten?

z.B.

Gesamtkosten                   $42

Oben sollten die Gesamtkosten der linkbündige Text sein und $42 der rechtsbündige Text.

Answer 1

2021 Update...

Bootstrap 5 (beta)

Für die Ausrichtung innerhalb eines Flexbox-Containers oder einer row...

• ml-auto ist jetzt ms-auto
• mr-auto ist jetzt me-auto

Für Textausrichtung oder Floats...

• text-left ist jetzt text-start
• text-right ist jetzt text-end
• float-left ist jetzt float-start
• float-right ist jetzt float-end

Bootstrap 4+

• pull-right ist jetzt float-right
• text-right ist wie in 3.x und funktioniert für Inline-Elemente
• Sowohl float-* als auch text-* sind responsiv für verschiedene Ausrichtungen bei verschiedenen Bildschirmbreiten (z. B.: float-sm-right)

Die Flexbox-Utilities (z.B.: justify-content-between) können ebenfalls für die Ausrichtung verwendet werden:

         links

         rechts

oder automatische Abstände (z.B.: ml-auto) in jedem Flexbox-Container (row,navbar,card,d-flex,etc...)

         links

         rechts

Bootstrap 4 Ausrichtungs-Demo
Beispiele für rechtsbündige Ausrichtung in Bootstrap 4(float, flexbox, text-right, etc...)

---

Bootstrap 3

Verwenden Sie die Klasse pull-right..

    Gesamtkosten
    $42

Bootstrap 3 Demo

Sie können auch die Klasse text-right wie folgt verwenden:

    Gesamtkosten
    $42

Bootstrap 3 Demo 2

Answer 2

Anstelle der Verwendung der Klasse pull-right ist es besser, die Klasse text-right in der Spalte zu verwenden, da pull-right manchmal Probleme beim Ändern der Seitengröße verursacht.

Answer 3

In Bootstrap 4 lautet die richtige Antwort, die Klasse text-xs-right zu verwenden.

Dies funktioniert, weil xs die kleinste Bildschirmgröße in BS angibt. Wenn Sie möchten, können Sie die Ausrichtung nur dann anwenden, wenn der Bildschirm mittelgroß oder größer ist, indem Sie text-md-right verwenden.

In der neuesten Alpha-Version wurde text-xs-right auf text-right vereinfacht.

    Gesamtkosten
    $42

Answer 4

Bootstrap V4 führt Flexbox-Unterstützung ein

  Flex Element
  Flex Element
  Flex Element

Erfahren Sie mehr unter https://v4-alpha.getbootstrap.com/utilities/flexbox/

Answer 5

bootstrap 5.0

• float

• row

  left
  right

Eine ganze Spalte kann 12 aufnehmen, 6 (col-sm-6) ist genau die Hälfte, und in dieser Hälfte eine links(float-start) und eine rechts(float-end).

mehr Beispiel

• fontawesome-button