Allineamento a sinistra e allineamento a destra all'interno del div in Bootstrap


268

Quali sono alcuni dei modi più comuni per allineare a sinistra del testo e allineare a destra un altro testo all'interno di un contenitore div nel bootstrap?

per esempio

Total cost                   $42

Il costo sopra il totale dovrebbe essere allineato a sinistra e $ 42 è allineato a destra

Risposte:


611

Aggiornamento 2018 ...

Bootstrap 4.1+

  • pull-right è ora float-right
  • text-right è uguale a 3.xe funziona con elementi incorporati
  • entrambi float-*e text-*sono sensibili per diversi allineamento a differenti larghezze (es: float-sm-right)

I programmi di utilità flexbox (ad es .:) justify-content-betweenpossono essere utilizzati anche per l'allineamento:

<div class="d-flex justify-content-between">
      <div>
         left
      </div>
      <div>
         right
      </div>
 </div>

oppure, margini automatici (ad esempio ml-auto:) in qualsiasi contenitore flexbox (riga, barra di navigazione, scheda, d-flex, ecc ...)

<div class="d-flex">
      <div>
         left
      </div>
      <div class="ml-auto">
         right
      </div>
 </div>

Bootstrap 4 Align Demo
Bootstrap 4 Right Align Esempi (float, flexbox, text-right, ecc ...)


Bootstrap 3

Usa la pull-rightclasse ..

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

Demo Bootstrap 3

Puoi anche usare la text-rightclasse in questo modo:

  <div class="row">
    <div class="col-md-6">Total cost</div>
    <div class="col-md-6 text-right">$42</div>
  </div>

Bootstrap 3 Demo 2


2
Per Bootstrap 3, per la colonna, ha text-rightfunzionato per me.
Florin Vîrdol,

60

Invece di usare pull-rightclass, è meglio usare text-rightclass nella colonna, perché a pull-rightvolte crea problemi durante il ridimensionamento della pagina.


17

In Bootstrap 4 la risposta corretta è usare la text-xs-rightclasse.

Questo funziona perché xsindica la dimensione del viewport più piccola in BS. Se lo si desidera, è possibile applicare l'allineamento solo quando la finestra è media o più grande utilizzando text-md-right.

Nell'ultima versione alfa, text-xs-rightè stato semplificato text-right.

<div class="row">
    <div class="col-md-6">Total cost</div>
    <div class="col-md-6 text-right">$42</div>
</div>


6

Possiamo ottenere da Bootstrap 4 Flexbox:

<div class="d-flex justify-content-between w-100">
<p>TotalCost</p> <p>$42</p>
</div>

d-flex // Display Flex
justify-content-between // justify-content:space-between
w-100 // width:100%

Esempio: JSFiddle


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

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.