Sto cercando di creare una riga con 2 colonne: una colonna a sinistra con il suo contenuto allineato a sinistra, e la seconda colonna con il suo contenuto allineato a destra (old pull-right).
Come faccio a fare questo in alpha-6?
Ho provato alcune cose, ma questo è quello che ho finora. Cosa mi manca?
<div class="row">
<div class="col">left</div>
<div class="col ml-auto">content needs to be right aligned</div>
</div>
risposte:
40 per risposta № 1Uso float-right
per elementi di blocco, o text-right
per elementi in linea:
<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
Se float-right
non funziona, ricordatelo Bootstrap 4 è ora Flexboxe molti elementi sono display:flex
che può impedire float-right
dal lavoro.
In alcuni casi, le classi di utilità come align-self-end
o ml-auto
lavorare per allineare a destra gli elementi che si trovano all'interno di un contenitore Flexbox come Bootstrap 4 .row, Card o Nav. Il ml-auto
(margin-left: auto) viene utilizzato in un elemento flexbox per spostare gli elementi a destra.
Bootstrap 4 allinea gli esempi giusti
0 per risposta № 2
Dalla documentazione, lo fai come:
<div class="row">
<div class="col-md-6">left</div>
<div class="col-md-push-6">content needs to be right aligned</div>
</div>