Каковы некоторые из распространенных способов выравнивания влево одного текста и вправо другого текста в контейнере div в bootstrap?
Например.
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 (row, navbar, card, d-flex, etc...).
<div class="d-flex">
<div>
left
</div>
<div class="ml-auto">
right
</div>
</div>
Bootstrap 4 Align Demo
Bootstrap 4 Примеры выравнивания справа(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>
Вы также можете использовать класс text-right
следующим образом:
<div class="row">
<div class="col-md-6">Total cost</div>
<div class="col-md-6 text-right">$42</div>
</div>
Вместо класса pull-right
лучше использовать класс text-right
в колонке, потому что pull-right
иногда создает проблемы при изменении размера страницы.
<удар>в Bootstrap 4 Правильный ответ-использовать текст-хз-право класса.
Это работает, потому что хз
- обозначает наименьший размер окна в БС. Если вы хотели, вы могли бы применить выравнивание только тогда, когда область просмотра средних и крупных с помощью текста-МД-право`&.ЛТ;/удара>
В последний Альфа, текст-хз-правобыла упрощена, чтобы
текст-право`.
<div class="row">
<div class="col-md-6">Total cost</div>
<div class="col-md-6 text-right">$42</div>
</div>
Загрузочный В4 введена поддержка адаптируемых блоков
<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 элемента:
<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][1]
<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>
Это должно сделать работу просто отлично