Помогите разобраться с сеткой.
Внутри container-fluid есть две колонки (col-md-8 и col-md-4). col-md-8 - это background с контентом, а col-md-4 - это image. Как сделать, чтобы background и image тянулись на всю ширину экрана, а контент не прижимался к левому краю?
Спасибо за помощь
]2
1 ответ
Возможно вам подойдёт такое решение.
Мы добавим несколько стилей для .col с картинкой. Зададим позиционирование, что бы выйти за рамки кола и прижмем картинку к правому краю контейнера.
1) Добавьте класс bicycle контейнеру с картинкой: class="col-md-4 bicycle".
Вот класс:
.bicycle{
position: absolute;
right: 0;
overflow: hidden;
}
2) Так же убедитесь что для картинки не задана ни width ни max-width. В фотошопе сделайте размер картинки как в макете, она встанет как надо. Если у вас где то глобально прописаны для картинок max-width, просто переопределите её в css вот так:
.bicycle img{
max-width: none;
}
Готово. Добавлю ещё 3 пункт на случай если возникнут вопросы при уменьшении окна браузера.
3) Когда начнете уменьшать макет и он выйдет за пределы "md" верстка сломается, что бы исправить нужно создать медиазапрос:
@media (max-width: 768px) {
.bicycle{
position: relative;
}
.bicycle img{
max-width: 100%;
}
}
Это отменит все наши манипуляции и можно дальше работать в обычном режиме, делать наш текст на 12 колонок а картинку опустить ниже или вообще убрать.
card
, внутри которого разместить контейнер, а уже в контейнер все остальное. Изображению дать позиционирование и прочее из этой оперы. Это я описал для первого изображения (со столом которое).