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 поддержку