Kairės ir dešinės pusės lygiavimas div sistemoje "Bootstrap

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 elementams
• tiek float-*, 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>

Bootstrap 3 Demo

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>

Bootstrap 3 Demo 2

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