Каковы некоторые из распространенных способов выравнивания текста и правильного выравнивания другого текста в контейнере div в бутстрапе?
например.
Total cost $42
Выше общей стоимости должен быть выровненный текст, а $42 - выровненный справа текст
Используйте класс 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
теперь float-right
text-right
совпадает с 3.xfloat-*
и text-*
responsive для различного выравнивания с разной шириной (например: float-sm-right
)Кроме того, для выравнивания можно использовать утилиты flexbox:
<div class="d-flex justify-content-between">
<div>
left
</div>
<div>
right
</div>
</div>
Вместо использования класса 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/
<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>
Это должно делать работу только нормально
<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>
text-right
работало для меня.text-right
очень эффективно для Bootstrap 3, как это было предложено Florin.