Bootstrap выровнять по правому краю

Как сделать прелоадер для сайта?

Форма обратной связи для сайта с отправкой на почту

Как в PHP узнать IP пользователя и определить его страну?

Как уйти от TV и увеличить быстродействие MODX mFilter2?

Недавно начал знакомство с Bootstrap и столкнулся с ситуацией, где в div’е размещается 2 блока: один с текстом, другой с изображением. Но загвоздка в том, что изображение должно прилипать не к краю контейнера, а к краю экрана. На просторах сети такого решения найти не смог, к сожалению.

Как это можно логичнее реализовать?

Макет:

Я делал это как-то так:

Сразу прошу извинить за, вероятно, кривое сообщение, чукча только учится)

4 ответа 4

Решение по вашему вопросу:

Судя по вашим скриншотам — текст должен был прилеплен к краям контейнера. Это важное условие, так как в таком случае использовать .container-fluid уже не удастся. Однако можно использовать .container для контента, и абсолютное позиционирование по секции для изображения.

Обратите внимание на @media запрос — на узких экранах, чтобы контент не наслаивался на изображение — мы располагаем изображение над контентом:

Каковы некоторые из распространенных способов выравнивания текста и правильного выравнивания другого текста в контейнере div в бутстрапе?

Выше общей стоимости должен быть выровненный текст, а $42 — выровненный справа текст

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

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

2017 — Обновление для Bootstrap 4

• pull-right теперь float-right
• text-right совпадает с 3.x
• оба float-* и text-* responsive для различного выравнивания с разной шириной (например: float-sm-right )

Кроме того, для выравнивания можно использовать утилиты flexbox:

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

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

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

В последней альфах text-xs-right было упрощено до text-right .

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