/ / Bootstrap 4: col allineamento a destra - twitter-bootstrap, bootstrap-4, twitter-bootstrap-4

Bootstrap 4: col allineamento a destra - twitter-bootstrap, bootstrap-4, twitter-bootstrap-4

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 № 1

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

Documenti