Quali sono alcuni dei modi comuni per allineare a sinistra alcuni testi e allineare a destra altri testi all'interno di un contenitore div in bootstrap?
ad es.
Total cost $42
Sopra il costo totale dovrebbe essere testo allineato a sinistra e $42 è testo allineato a destra
2018 Aggiornamento...
Bootstrap 4.1+
pull-right
è ora float-right
.text-right
è lo stesso della 3.x e funziona per gli elementi in lineafloat-*
che text-*
sono responsive per allineamenti diversi a larghezze diverse (cioè: float-sm-right
)Anche gli strumenti di flexbox (es: justify-content-between
) possono essere usati per l'allineamento:
<div class="d-flex justify-content-between">
<div>
left
</div>
<div>
right
</div>
</div>
oppure, i margini automatici (es:ml-auto
) in qualsiasi contenitore flexbox (riga, navbar, scheda, d-flex, ecc...)
<div class="d-flex">
<div>
left
</div>
<div class="ml-auto">
right
</div>
</div>
Bootstrap 4 Align Demo
Esempi di Bootstrap 4 Allineamento a destra(float, flexbox, text-right, etc...)
hr>
Bootstrap 3
Utilizzare la classe 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>
Puoi anche usare la classe text-right
come questa:
<div class="row">
<div class="col-md-6">Total cost</div>
<div class="col-md-6 text-right">$42</div>
</div>
Invece di usare la classe pull-right
, è meglio usare la classe text-right
nella colonna, perché pull-right
crea problemi a volte durante il ridimensionamento della pagina.
<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>
Questo dovrebbe fare il lavoro proprio bene