Jakie są niektóre z powszechnych sposobów wyrównywania do lewej niektórych tekstów i wyrównywania do prawej niektórych innych tekstów wewnątrz kontenera div w bootstrap?
np.
Total cost $42
Powyżej całkowitego kosztu powinien być tekst wyrównany do lewej, a $42 to tekst wyrównany do prawej
Aktualizacja na rok 2018...
Bootstrap 4.1+
pull-right
jest teraz float-right
.text-right
jest taki sam jak w wersji 3.x i działa dla elementów inlinefloat-*
jak i text-*
są responsywne dla różnych wyrównań przy różnych szerokościach (np.: float-sm-right
)Narzędzia flexbox (np:justify-content-between
) mogą być również użyte do wyrównania:
<div class="d-flex justify-content-between">
<div>
left
</div>
<div>
right
</div>
</div>
lub, auto-marginesów (np:ml-auto
) w każdym kontenerze flexbox (row, navbar, card, d-flex, etc...)
<div class="d-flex">
<div>
left
</div>
<div class="ml-auto">
right
</div>
</div>
Bootstrap 4 Align Demo
Przykłady wyrównania do prawej Bootstrap 4 Right Align(float, flexbox, text-right, etc...)
Bootstrap 3
Użyj klasy 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>
Możesz również użyć klasy text-right
w ten sposób:
<div class="row">
<div class="col-md-6">Total cost</div>
<div class="col-md-6 text-right">$42</div>
</div>
Zamiast używać klasy pull-right
, lepiej jest użyć klasy text-right
w kolumnie, ponieważ pull-right
stwarza czasami problemy podczas zmiany rozmiaru strony.
<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>
To powinno załatwić sprawę.