Сложная полная ширина сетки

Question

Как мне получить этот заголовок «на всю ширину». Так что изображение находится на левой стороне экрана. Но что содержимое внутри (Президент Жан ...) находится в сетке?

Я думал о создании нового контейнера.

.container--full { max-width: 1400px; width: 100%; }

Максимальная ширина моей сетки .container составляет 1170 пикселей. Так что мой новый контейнер шире .container.

А затем установите фоновое изображение, положение слева и серый цвет фона. Внутри этого .container - полностью, создайте .container

<div class="container--full">
    <div class="container">

    </div>
</div> 

Испытание с контейнером-жидкостью.

 <div class="container-fluid" style="background-image: url('<?php bloginfo('template_directory'); ?>/images/commission-header.png');">

    <div class="container">

            <div class="col-sm-3">

                    <div class="info">
                        President
                    </div>
            </div>

            <div class="col-sm-9">

                Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime obcaecati consequatur illum dolor quasi labore molestiae voluptatum consectetur laborum vel, modi nulla totam blanditiis quam sapiente, suscipit laudantium. Necessitatibus, eos.

            </div>

    </div>


</div>

CSS

.commission-business {
.container-fluid {
    background-color: $grey--lighter;
    background-position: left top;
    background-repeat: no-repeat;
}

.info {
    background: red;
    display: block;
    padding: 1rem 2rem;
}
}

Answer 1

Просто используйте класс начальной загрузки «контейнер-жидкость». (узнать больше)

<div class="container-fluid">
    <div class="row>
        ... 
    </div>
</div>