Quais são algumas das formas comuns de alinhar à esquerda algum texto e à direita algum outro texto dentro de um recipiente de mergulho em bootstrap?
por exemplo
Total cost $42
Acima do custo total deve ser texto alinhado à esquerda e $42 é texto alinhado à direita
2018 Actualização...
**Bootstrap 4.1+***
float-*
e text-*
são responsivos para diferentes alinhamentos em diferentes larguras (ou seja: float-sm-right
)Os utils flexbox (ex:justify-content-between
) também podem ser utilizados para alinhamento:
<div class="d-flex justify-content-between">
<div>
left
</div>
<div>
right
</div>
</div>
ou, auto-margins (ex:ml-auto
) em qualquer recipiente flexbox (linha,navbar,card,d-flex,etc...)
<div class="d-flex">
<div>
left
</div>
<div class="ml-auto">
right
</div>
</div>
Bootstrap 4 Align Demo
Bootstrap 4 Right Align Examples(float, flexbox, text-right, etc...)
**Bootstrap 3***
Utilize a classe `pull-direita'...
<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>
Você também pode utilizar a classe "texto-direita" desta forma:
<div class="row">
<div class="col-md-6">Total cost</div>
<div class="col-md-6 text-right">$42</div>
</div>
Ao invés de utilizar a classe pull-direita', é melhor utilizar a classe
texto-direita' na coluna, porque `pull-direita' cria problemas às vezes enquanto redimensiona a página.
<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>
Isso deve fazer o trabalho bem.