wake-up-neo.com

Links- und Rechtsausrichtung innerhalb von div in Bootstrap

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

z.B.

Total cost                   $42

Über den Gesamtkosten sollte linksbündiger Text und $ 42 rechtsbündiger Text stehen

twitter-bootstrapuser-interfacebootstrap-4
224
user462455

2018 Update ...

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 ansprechend für unterschiedliche Ausrichtung bei unterschiedlichen Breiten (dh: float-sm-right)

Die flexbox Utils (zB: justify-content-between) können auch zum Ausrichten verwendet werden:

<div class="d-flex justify-content-between">
      <div>
         left
      </div>
      <div>
         right
      </div>
 </div>

oder automatische Ränder (zB: 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 Klasse pull-right.

<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 auch die Klasse text-right wie folgt 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

510
Zim

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

55
Arun Agarwal

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

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

In der neuesten Alpha wurde text-xs-right zu text-right vereinfacht.

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

Bootstrap v4 bietet Unterstützung für flexbox

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

9
William Entriken

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

2
pradeep kumar
<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 die Arbeit einfach in Ordnung machen

1
Terrymight