col rechts ausrichten

Ich versuche eine Zeile mit 2 Spalten zu erstellen. Eine Spalte links mit linksbündigem Inhalt und die zweite Spalte rechtsbündig (altes Pull-Right).

Wie gehe ich in Alpha-6 vor?

Ich habe ein paar Dinge ausprobiert, aber das habe ich bisher. Was vermisse ich?

<div class="row">
    <div class="col">left</div>
    <div class="col ml-auto">content needs to be right aligned</div>
</div>

Verwendung float-rightfür Blockelemente oder text-rightfür Inline-Elemente:

<div class="row">
     <div class="col">left</div>
     <div class="col text-right">inline content needs to be right aligned</div>
</div>
<div class="row">
      <div class="col">left</div>
      <div class="col">
          <div class="float-right">element needs to be right aligned</div>
      </div>
</div>

http://www.codeply.com/go/oPTBdCw1JV

Wenn dies float-rightnicht funktioniert, denken Sie daran, dass Bootstrap 4 jetzt Flexbox ist und viele Elemente display:flexdie Funktion beeinträchtigen können float-right.

In einigen Fällen mögen align-self-endoder ml-autoarbeiten die Dienstprogrammklassen daran, Elemente, die sich in einem Flexbox-Container befinden, wie Bootstrap 4.row, Card oder Nav, nach rechts auszurichten. Das ml-auto(Rand-Links: Auto) wird in einem Flexbox-Element verwendet, um Elemente nach rechts zu verschieben.

Bootstrap 4 richtet die richtigen Beispiele aus

Wie wäre es damit? Bootstrap 4

<div class="row justify-content-end">
    <div class="col-3">
        The content is positioned as if there was
        "col-9" classed div appending this one.
    </div>
</div>

Für Bootstrap 4 finde ich Folgendes sehr praktisch, weil:

• Die rechte Spalte nimmt genau den Platz ein, den sie benötigt, und wird nach rechts gezogen
• während die linke Spalte immer die maximale Menge an Speicherplatz erhält!.

Es ist die Kombination von col und col-auto, die die Magie macht. Sie müssen also keine Spaltenbreite definieren (wie Spalte 2, ...).

<div class="row">
    <div class="col">Left</div>
    <div class="col-auto">Right</div>
</div>

Ideal zum Ausrichten von Wörtern, Symbolen, Schaltflächen usw. nach rechts.

Ein Beispiel dafür, wie dies auf kleinen Geräten reagiert:

<div class="row">
    <div class="col">Left</div>
    <div class="col-12 col-sm-auto">Right (Left on small)</div>
</div>

Überprüfen Sie diese Geige https://jsfiddle.net/Julesezaar/tx08zveL/

Aus der Dokumentation geht Folgendes hervor:

<div class="row">
    <div class="col-md-6">left</div>
    <div class="col-md-push-6">content needs to be right aligned</div>
</div>

Docs