Левое выравнивание и правое выравнивание в div в Bootstrap
Каковы некоторые из распространенных способов левого выравнивания некоторого текста и правого выравнивания некоторого другого текста в контейнере div в bootstrap?
например
Total cost
выше общей стоимости должен быть выровнен текст слева и $ 42 выровнен текст справа
6 ответов
обновить 2018...
Bootstrap 4.1+
-
pull-right
теперьfloat-right
-
text-right
это то же самое, что и 3.x, и работает для встроенных элементов - и
float-*
иtext-*
are отзывчивый для различного выравнивания на различных ширинах (ie:float-sm-right
)
Flexbox utils (например:justify-content-between
) можно также использовать для выравнивание:
<div class="d-flex justify-content-between">
<div>
left
</div>
<div>
right
</div>
</div>
или, авто-отступы (например:ml-auto
) в любом контейнере flexbox (строка,navbar,карточка,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 и т. д...)
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"></span></div>
</div>
</div>
вы также можете использовать the text-right
класс такой:
<div class="row">
<div class="col-md-6">Total cost</div>
<div class="col-md-6 text-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"></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></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"></div>
</div>
Это должно сделать работу просто ok