css - Complex full width grid

Question

How can I have this header 'full width'. So that the image is on the left side of the screen. But that the content inside (President Jean ...) is in the grid?

I was thinking about creating a new container.

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

My .container grid has a max-width of 1170px. So my new container is wider than .container.

And then set a background-image, position left and background color grey. Inside that .container--full, create .container

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

    </div>
</div> 

Test with container-fluid.

 <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;
}
}

标签： cssbootstrap-4

Answer 1

只需使用引导程序“容器流体”类。（学到更多）

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