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

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

например

Total cost                   $42

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

2018 Обновление ...

Bootstrap 4.1+

• pull-right сейчас float-right
• text-right такой же, как 3.x, и работает для встроенных элементов
• как float-*и text-*в отзывчивы для различного выравнивания при различной ширине (т.е. 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 Примеры выравнивания по правому краю (float, flexbox, text-right и т. Д.)

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

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

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

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/

С помощью Bootstrap 4 Flexbox мы можем добиться:

<div class="d-flex justify-content-between w-100">
<p>TotalCost</p> <p>$42</p>
</div>

d-flex // Display Flex
justify-content-between // justify-content:space-between
w-100 // width:100%

Пример: JSFiddle

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

Это должно сделать работу просто хорошо