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 колонок а картинку опустить ниже или вообще убрать.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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