Kokie yra įprasti būdai, kaip bootstrap sistemoje išlyginti kai kuriuos teksto elementus kairėn, o kitus - dešinėn div konteinerio viduje?
pvz.
Total cost $42
Virš bendros kainos turėtų būti kairėje sulygiuotas tekstas, o $42 yra dešinėje sulygiuotas tekstas
2018 m. atnaujinimas...
Bootstrap 4.1+
pull-right
dabar yra float-right
text-right
yra toks pat kaip 3.x versijoje ir veikia eilutėje esantiems elementamsfloat-*
, tiek text-*
yra responsive, kad būtų galima skirtingai lygiuoti esant skirtingam pločiui (t. y.: float-sm-right
).Lyginimui taip pat galima naudoti flexbox įrankius (pvz., justify-content-between
):
<div class="d-flex justify-content-between">
<div>
left
</div>
<div>
right
</div>
</div>
arba automatinius kraštinius (pvz., ml-auto
) bet kuriame flexbox konteineryje (eilutėje, navbar'e, kortelėje, d-flex ir t. t.).
<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 ir t. t.)
Bootstrap 3
Naudokite pull-right
klasę..
<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>
Taip pat galite naudoti text-right
klasę, pvz:
<div class="row">
<div class="col-md-6">Total cost</div>
<div class="col-md-6 text-right">$42</div>
</div>
Vietoj pull-right
klasės stulpelyje geriau naudoti text-right
klasę, nes pull-right
kartais sukelia problemų keičiant puslapio dydį.
<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>
Tai turėtų atlikti darbą tiesiog gerai