Linksausrichtung und Rechtsausrichtung innerhalb von div in Bootstrap

Was sind einige der gebräuchlichen Methoden, um Text nach links und anderen Text nach rechts in einem div-Container im Bootstrap auszurichten?

z.B

Total cost                   $42

Über den Gesamtkosten sollte linksbündiger Text und 42 USD rechtsbündiger Text liegen

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-betweenkö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-rightKlasse ..

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

Anstatt pull-rightKlasse zu verwenden, ist es besser, text-rightKlasse in der Spalte zu verwenden, da dies pull-rightmanchmal zu Problemen beim Ändern der Seitengröße führt.

In Bootstrap 4 besteht die richtige Antwort darin, die text-xs-rightKlasse zu verwenden.

Dies funktioniert, weil xsdie 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 ist text-md-right.

In der neuesten Alpha text-xs-rightwurde vereinfacht text-right.

<div class="row">
    <div class="col-md-6">Total cost</div>
    <div class="col-md-6 text-right">$42</div>
</div>

Bootstrap v4 bietet Flexbox-Unterstützung

<div class="d-flex justify-content-end">
  <div class="mr-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

Weitere Informationen finden Sie unter https://v4-alpha.getbootstrap.com/utilities/flexbox/

Wir können durch Bootstrap 4 Flexbox erreichen:

<div class="d-flex justify-content-between w-100">
<p>TotalCost</p> <p>$42</p>
</div>

d-flex // Display Flex
justify-content-between // justify-content:space-between
w-100 // width:100%

Beispiel: JSFiddle

<div class="row">
  <div class="col-xs-6 col-sm-4">Total cost</div>
  <div class="col-xs-6 col-sm-4"></div>
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">$42</div>
</div>

Das sollte den Job einfach ok machen