复杂的全宽网格

Question

如何使此标头为“全宽”。这样图像就在屏幕的左侧。但是里面的内容（吉恩总统...）在网格中吗？

我正在考虑创建一个新的容器。

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

.container网格的最大宽度为1170px。所以我的新容器比.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

只需使用引导程序“容器-流体”类。 (learn more)

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