Выровнять по левому краю и выравнивать по правому краю в 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 ) также могут использоваться для выравнивания:

 
left
right

или auto-margin (например: ml-auto ) в любом контейнере flexbox (строка, navbar, card, d-flex и т. д.)

 
left
right

Bootstrap 4 Выровнять демо
Примеры Bootstrap 4 Right Align (float, flexbox, text-right и т. Д.)


Бутстрап 3

Используйте class pull-right ..

 
Total cost
$42

Демо-версия Bootstrap 3

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

  
Total cost
$42

Bootstrap 3 Demo 2

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

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

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

В последней версии alpha text-xs-right был упрощен до text-right .

 
Total cost
$42

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

 
Flex item
Flex item
Flex item

Подробнее читайте на странице https://v4-alpha.getbootstrap.com/utilities/flexbox/.

Мы можем достичь Bootstrap 4 Flexbox:

 

TotalCost

$42

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

Пример: JSFiddle

 
Total cost
$42

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

  • Изменить twitter bootstrap navbar
  • Как создать липкое меню левой боковой панели с помощью бутстрапа 3?
  • Twitter Bootstrap добавляет активный class в li
  • Как интегрировать тему Wrap Bootstrap в приложение Rails?
  • JQuery загружается только при обновлении страницы в приложении Rails 4
  • как полностью уничтожить загрузочное модальное окно?
  • Twitter Bootstrap CSS, влияющий на Карты Google
  • Использование PrimeFaces с Bootstrap вызывает изменения в заполнении / калибровке / границах
  • На странице начальной загрузки, как центрировать div
  • Загружать контент с помощью ajax в bootstrap modal
  • Twitter Bootstrap - как центрировать элементы по горизонтали или по вертикали
  • Давайте будем гением компьютера.