Подравняване наляво и надясно в рамките на div в Bootstrap

Какви са някои от най-разпространените начини за подравняване наляво на някакъв текст и надясно на друг текст в контейнер div в bootstrap?

напр.

Total cost                   $42

Над общата цена трябва да бъде ляво подравнен текст, а $42 е дясно подравнен текст

Решение

Актуализация за 2018 г....

Bootstrap 4.1+

  • pull-right вече е float-right
  • text-right е същото като в 3.x и работи за инлайн елементи
  • и float-*, и text-* са responsive за различно подравняване при различни ширини (т.е.: float-sm-right)

Помощните средства на flexbox (напр.: justify-content-between) също могат да се използват за подравняване:

<div class="d-flex justify-content-between">
      <div>
         left
      </div>
      <div>
         right
      </div>
 </div>

или автоматични маржове (напр.: ml-auto) във всеки контейнер flexbox (ред, навигационна лента, карта, d-flex и т.н.).

<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

Използване на класа 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>

Bootstrap 3 Demo

Можете също така да използвате класа text-right по следния начин:

  <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

Коментари (2)

Вместо да използвате класа pull-right, по-добре е да използвате класа text-right в колоната, тъй като pull-right понякога създава проблеми при промяна на размера на страницата.

Коментари (0)
<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>

Това би трябвало да свърши работа просто добре

Коментари (0)