Let DIV break out of Bootstrap 4 container

问题

I'm using a container in Bootstra 4 to center the conent of my page in the middle of the browser. So far so normal.

But I need something more. The content inside the container should break out on the left side and should grow to the browser-window. But only on the left side.

Because I'm using the slick slider, I can't use position:absolute or something else on a single object in the container DIV. I need an whole DIV inside the container to grow to the left side. And I need the container to align it on the right side to the rest of the page.

Here is my actual code: https://codepen.io/cray_code/pen/erQJey

This is what I need. The image inside the slides should grow to the left. The blue background is the browser window:

<div class="bg-dark">
    <div class="container bg-white">
        <div class="slider">
            <div><img src="http://via.placeholder.com/2500x500" class="img-fluid"></div>
            <div><img src="http://via.placeholder.com/2500x500" class="img-fluid"></div>
            <div><img src="http://via.placeholder.com/2500x500" class="img-fluid"></div>
        </div>
    </div>
</div>

<script type="text/javascript">
$(document).ready(function(){
    $('.slider').slick({
        infinite: true,
        dots: true,
        arrows: false,
        draggable: false,
        fade:true,
        autoplay:true,
        autoplaySpeed: 4000,
        speed:1200,
    })
});
</script>

回答1:

Try this (codepen)

HTML:

<div class="bg-dark">
    <div class="container bg-white">
        Content
    </div>
    <div class="slider">
        Slider
    </div>
    <div class="container bg-white">
        Content2
    </div>
</div>

JS:

var width = $(window).width() - (($(window).width() - 
$('.container').outerWidth() ) / 2);
$('.slider').width(width+'px');

$( window ).resize(function() {
    var width = $(window).width() - (($(window).width() - $('.container').outerWidth() ) / 2);
    $('.slider').width(width+'px');
});

回答2:

An answer for future readers seeking a CSS only solution. You can calculate the margin right based on the 1/2 the width of the Bootstrap container.

Left-align Bootstrap container: https://www.codeply.com/go/tnjA5Hn8Zs

.container-left {
   padding-left: 15px;
   padding-right: 15px;
}

@media (min-width:576px){
  .container-left {
    margin-left: 0;
    margin-right: calc(50vw - 270px);
  }
}

@media (min-width:768px){
  .container-left {
    margin-left: 0;
    margin-right: calc(50vw - 360px);
  }
}

@media (min-width:992px){
  .container-left {
    margin-left: 0;
    margin-right: calc(50vw - 480px);
  }
}

@media (min-width:1200px){
  .container-left {
    margin-left: 0;
    margin-right: calc(50vw - 570px);
  }
}

来源：https://stackoverflow.com/questions/50392425/let-div-break-out-of-bootstrap-4-container

标签

javascript

html

css

bootstrap-4

slick.js