Не могу понять как сверстать данный макет. Так чтобы я мог поставить левым блокам фоновый цвет и изображение и при этом чтобы содержимое блоков было по направляющим.. Верстка планируется быть адаптивной.
Какая должна быть правильная структура и подход?
Я пробовал делать с помощью bootstrap.
<div class="container">
<div class="row">
<div class="col-lg-6 left">
<div class="first">Первый левый блок</div>
<div class="red">Красный левый блок</div>
</div>
<div class="col-lg-6 right">Правый блок</div>
</div>
</div>
Проблема в том, что сейчас блоки с классами left
и right
ограничены шириной .container
. Поэтому не будут на всю ширину.
А если я буду делать так:
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 left">
<div class="first">Первый левый блок</div>
<div class="red">Красный левый блок</div>
</div>
<div class="col-lg-6 right">Правый блок</div>
</div>
</div>
то я смогу сделать им фоновый цвет, но контент не попадет в размер контейнера (по ширине направляющих).
bootstrap
туда, где он совсем не лезет, верстайте с нуля и всё получится