0

введите сюда описание изображенияПомогите разобраться с сеткой. Внутри container-fluid есть две колонки (col-md-8 и col-md-4). col-md-8 - это background с контентом, а col-md-4 - это image. Как сделать, чтобы background и image тянулись на всю ширину экрана, а контент не прижимался к левому краю? Спасибо за помощь![Scrin]2

4
  • немного не понятно, что должно в итоге получиться 21 окт 2017 в 18:17
  • Посмотрите пожалуйста на скрин из psd и думаю Вы поймёте. Нужно сверстать как в макете. Т.е. картинка и левая часть backgrond выходят за сетку, т.е. как я понимаю этот блок должен находится в container-fluid, правильно?
    – brain
    21 окт 2017 в 18:45
  • Думаю, что вам стоит поиграться (кастомизировать) с компонентом card, внутри которого разместить контейнер, а уже в контейнер все остальное. Изображению дать позиционирование и прочее из этой оперы. Это я описал для первого изображения (со столом которое).
    – Colibri
    21 окт 2017 в 21:01
  • На Bootstrap нельзя построить все на свете. Почти всегда нужно импровизировать, добавляя либо свои компоненты, либо кастомизировать дефолтные - это нормальная практика. Но важно держать себя в руках и не разводить срач.
    – Colibri
    21 окт 2017 в 21:03

1 ответ 1

0

Возможно вам подойдёт такое решение.
Мы добавим несколько стилей для .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 колонок а картинку опустить ниже или вообще убрать.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.