Mitkä ovat joitakin yleisiä tapoja kohdistaa vasemmalle jokin teksti ja oikealle jokin muu teksti div-säiliön sisällä bootstrapissa?
Esim.
Total cost $42
Kokonaiskustannusten yläpuolella pitäisi olla vasemmalle tasattu teksti ja 42 dollaria on oikealle tasattu teksti.
2018 Update...
Bootstrap 4.1+**
pull-right
on nyt float-right
.text-right
on sama kuin 3.x:ssä, ja toimii rivielementeille.float-*
että text-*
ovat responsiivisia eri tasauksia varten eri leveyksillä (esim. float-sm-right
).Flexboxin apuvälineitä (esim. justify-content-between
) voidaan myös käyttää kohdistukseen:
<div class="d-flex justify-content-between">
<div>
left
</div>
<div>
right
</div>
</div>
tai automaattiset reunaviivat (esim:ml-auto
) missä tahansa flexbox-säiliössä (rivi-, navi-, kortti-, d-flex-, jne...).
<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, jne...)
Bootstrap 3
Käytä pull-right
-luokkaa...
<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>
Voit myös käyttää text-right
-luokkaa näin:
<div class="row">
<div class="col-md-6">Total cost</div>
<div class="col-md-6 text-right">$42</div>
</div>
pull-right
-luokan sijasta on parempi käyttää text-right
-luokkaa sarakkeessa, koska pull-right
-luokka aiheuttaa joskus ongelmia sivun koon muuttamisen yhteydessä.
<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>
Sen pitäisi tehdä työ ihan ok