— выравнивание по левому краю и выравнивание по правому краю внутри div в Bootstrap
спросил
Изменено
16 дней назад
Просмотрено
1,3 млн раз
Каковы некоторые из распространенных способов выравнивания по левому краю некоторого текста и выравнивания по правому краю другого текста в контейнере div в начальной загрузке?
напр.
Общая стоимость $42
Суммарная стоимость должна быть выровнена по левому краю, а $42 — по правому краю. 0
2021 Update…
Bootstrap 5 (beta)
Для выравнивания внутри div flexbox или row …
мл-авто теперь мс-авто
г-авто теперь я-авто
Для выравнивания текста или поплавков. .
text-left теперь text-start
text-right теперь text-end
float-left теперь float-start
float-right теперь float-end
Bootstrap 4+
тянуть вправо теперь плавать вправо
text-right такой же, как 3.x, и работает для встроенных элементов
оба float-* и text-* реагируют на различное выравнивание при разной ширине (например: float-sm-right
)
Утилита flexbox (например: justify-content-between ) также может использоваться для выравнивания:
<дел>
левый
<дел>
верно
или автоматические поля (например: ml-auto ) в любом контейнере flexbox (строка, навигационная панель, карта, d-flex и т. д.)
<дел>
левый
<дел>
верно
Bootstrap 4 Align Demo Bootstrap 4 Примеры выравнивания по правому краю (float, flexbox, text-right и т. д.) 05
<дел>
<дел>
Общая стоимость
42 доллара США
Bootstrap 3 Demo
Вы также можете использовать класс text-right следующим образом:
Общая стоимость
$42
Начальная загрузка 3 Демо 2
4
Вместо использования класса pull-right лучше использовать класс text-right в столбце, потому что pull-right иногда создает проблемы при изменении размера страницы.
В Bootstrap 4 правильный ответ — использовать класс text-xs-right
.
Это работает, потому что x обозначает наименьший размер области просмотра в BS. Если вы хотите, вы можете применить выравнивание только тогда, когда окно просмотра является средним или большим, используя text-md-right .
В последней альфа-версии text-xs-right был упрощен до text-right .
<дел>
Общая стоимость
$42
В Bootstrap v4 появилась поддержка flexbox
Элемент Flex
Элемент Flex
Элемент Flex
Узнайте больше на https://v4-alpha.getbootstrap.com/utilities/flexbox/
bootstrap 5.0
float
ряд
<дел>
слева
справа
Целый столбец может вместить 12, 6 (col-sm- 6 ) ровно половина, и в этой половине один слева ( float-start ) и один справа ( плавающий конец ).
Это будет работать и просто для понимания. В атрибуте класса я использовал классы Bootstrap 5.
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Электронная почта
Требуется, но никогда не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Bootstrap выравнивает столбец по правому краю –
спросил
Изменено
1 год, 9 месяцев назад
Просмотрено
317 тысяч раз
Я пытаюсь создать строку с двумя столбцами. Один столбец слева с его содержимым, выровненным по левому краю, а второй столбец с его содержимым, выровненным по правому краю (старое вытягивание вправо).
Как это сделать в альфа-6?
Я пробовал кое-что, но пока это то, что у меня есть. Что мне не хватает?
<дел>
слева
содержимое должно быть выровнено по правому краю
twitter-bootstrap
bootstrap-4
bootstrap-5
1
Bootstrap 5 (обновление 2021)
Чтобы выровнять элементы по правому краю в Bootstrap 5…
float-right теперь float-end text-right теперь text-end ml-auto теперь ms-auto
Bootstrap 4 (исходный ответ)
Использовать float-right для блочных элементов или
text-right для встроенных элементов:
слева
внутренний контент должен быть выровнен по правому краю
<дел>
слева
<дел>
элемент должен быть выровнен по правому краю
http://codeply. com/go/oPTBdCw1JV
Если float-right не работает, помните, что Bootstrap 4 теперь flexbox , и многие элементы display:flex что может предотвратить float-right из рабочего.
В некоторых случаях служебные классы, такие как
align-self-end или ml-auto , работают для выравнивания по правому краю элементов, которые находятся внутри контейнера flexbox, такого как Bootstrap 4 .row, Card или Nav. ml-auto (margin-left:auto) используется в элементе flexbox для перемещения элементов вправо.
Примеры выравнивания Bootstrap 4 по правому краю
0
Как насчет этого? Начальная загрузка 4
<дел>
Контент позиционируется так, как если бы
Div с классом "col-9" добавляется к этому.
2
Для Bootstrap 4 я нахожу следующее очень удобным, потому что:
столбец справа занимает ровно столько места, сколько ему нужно, и будет двигаться вправо
, в то время как левый столбец всегда занимает максимальное количество места!.
.
д.)
Если вы хотите, вы можете применить выравнивание только тогда, когда окно просмотра является средним или большим, используя 
Один столбец слева с его содержимым, выровненным по левому краю, а второй столбец с его содержимым, выровненным по правому краю (старое вытягивание вправо).
com/go/oPTBdCw1JV