col rechts ausrichten

79

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>

twitter-bootstrap bootstrap-4

— Thibs
quelle

Für die neue Version von Bootstrap habe ich diese funktionierende Verknüpfung gefunden: getbootstrap.com/docs/4.0/utilities/flex/#direction

— Irshad Khan

151

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

— Zim
quelle

36

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>

— Bexultan Myrzatayev
quelle

2

Lebensretter .. Danke :)

— Anjana Silva

Rechtfertigung-Inhalt-Ende ist nur lebensrettend.

— Norbert Boros

19

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/

— Julesezaar
quelle

col-auto sieht komisch aus, aber es ist das erste, was nach vielen erfolglosen Versuchen funktioniert hat, die horizontale Ausrichtung für nicht schwebende Tasten während eines halben Tages durchzuführen :)

— Alexander

1

Ich finde das die bessere Lösung für mein Szenario.

— Niels Lucas

1

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

— Jordan.JD
quelle

4

@ Guilherme, die Bootstrap 4-Tags wurden von jemand anderem hinzugefügt (nachdem ich geantwortet hatte). Die ursprüngliche Frage hatte nur ein Twitter-Bootstrap-Tag.

— Jordan.JD