Выровнять по левому краю и выравнивать по правому краю в div в Bootstrap

Каковы некоторые из распространенных способов выравнивания текста и правильного выравнивания другого текста в контейнере div в бутстрапе?

например.

Total cost                   $42

Выше общей стоимости должен быть выровненный текст, а $42 - выровненный справа текст

Ответ 1

Используйте класс 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>

Демо

Вы также можете использовать класс text-right следующим образом:

  <div class="row">
    <div class="col-md-6">Total cost</div>
    <div class="col-md-6 text-right">$42</div>
  </div>

2017 - Обновление для Bootstrap 4

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

Кроме того, для выравнивания можно использовать утилиты flexbox:

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

Bootstrap 4 Выровнять демо

Ответ 2

Вместо использования класса pull-right лучше использовать класс text-right в столбце, потому что pull-right иногда создает проблемы при изменении размера страницы.

Ответ 3

~~В Bootstrap 4 правильный ответ заключается в использовании класса text-xs-right.~~

Это работает, потому что xs обозначает наименьший размер видового экрана в BS. Если вы хотите, вы можете применить выравнивание только в том случае, если область просмотра является средним или большим с помощью text-md-right.

В последней альфах text-xs-right было упрощено до text-right.

<div class="row">
    <div class="col-md-6">Total cost</div>
    <div class="col-md-6 text-right">$42</div>
</div>

Ответ 4

Bootstrap v4 представляет flexbox поддержку

<div class="d-flex justify-content-end">
  <div class="mr-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

Подробнее... https://v4-alpha.getbootstrap.com/utilities/flexbox/

Ответ 5

<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>

Это должно делать работу только нормально

Ответ 6

<div style="width:100%;">
  <div style="width:100%;">
    <div style="width:50%;float:left">Total cost</div><div style="width:50%;float:right">$42</div>
  </div>
</div>