Как реализовать такую верстку?

Question

[Gallows-bird]

Подскажите новичку, как реализовать подобное в бутстрап и вообще имеет ли смысл его использование при подобном дизайне?

С версткой обычных сайтов особых проблем не испытываю, где контент как бы потоком по контейнеру идет. Ввиду своей неопытности подобные решения дизайнера порой вводят в ступор на достаточно долгое время. Вот пример:

1. Часть контента за пределами контейнера. Тот же логотип и текст слева. Если через position absolute, то при уменьшении окна браузера до достижения определенного брейкпоинта этот контент будет урезаться, если использовать контейнер бутстрап. Можно флюид, но он тут вроде как ни к чему.

2. Интересует правый блок с зеленым фоном сверху и белым снизу. Его нужно оформить через псевдоэлемент например как я понял. Но как быть опять же с уменьшением окна браузера? И внутри этого блока я так понимаю тоже все на абсолютном позиционировании основано будет. Черный текст заходит на этот блок как минимум, плюс логотип внутри - половина в блоке с зеленым фоном, половина в блоке с белым фоном.

3. Вопрос не по данному макету - в каких случаях бутстрап будет лишним? Где его использование либо не оправданно, либо вообще будет помехой.

Благодарю за помощь.

Comments

[origami1024]

1. Да там просто линии сетки левые какие-то, лого там на уровне с элементом "г. Могилев" (у этого элемента отступ сверху небольшой), по этим двум элементам проходит реальная левая граница макета.
2. Всё положи в container и прижми к правой границе браузера, ничего никуда не вылазит, просто игнорируй линии сетки - они не отсюда

[Gallows-bird]

origami1024, там ниже контент ровно по контейнеру идет. А этот выходит. Это не первый случай уже просто, потому и спрашиваю. На сетку внимание можно не обращать, да.

Вот ситуация аналогичная в этом плане. Как это верстать?

Answer 1

[Салават Салахутдинов]

1) Использовать отрицательный margin начиная с определенной ширины (+ обязательно поставьте overflow:hidden для контейнера, иначе будет горизонтальная полоса прокрутки)
Например

.header {
  overflow:hidden;
}
@media (min-width: 1300px) {
  .header-logo {
    margin-left: -100px;
  }
}

2) Сделать общий контейнер для фона и контента, при этом фон будет как position: absolute, а контент position: relative

<div class="hero-section">
  <div class="hero-section__bg">
    ...контент фона
  </div>
  <div class="hero-section__content">
    <div class="container">
      ...контент
    </div>
  </div>
</div>

.hero-section {
  position: relative;
}
.hero-section__content {
  position: relative;
  z-index: 1;
}
.hero-section__bg {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
}
@media (min-width: 900px) {
  .hero-section__bg {
    width: 45%;
  }
}