让DIV突破Bootstrap4个容器

Question

我正在使用 Bootstra 4 中的容器将我的页面内容置于浏览器中间。到目前为止一切正常。

但我还需要更多。容器内的内容应该在左侧突破，并且应该增长到浏览器-window。但只在左侧。

因为我使用的是灵活的滑块，所以我不能在容器 DIV 中的单个对象上使用 position:absolute 或其他东西。我需要容器内的整个 DIV 才能长到左侧。我需要容器将其在右侧与页面的其余部分对齐。

这是我的实际代码：https://codepen.io/cray_code/pen/erQJey

这就是我需要的。幻灯片中的图像应该向左增长。蓝色背景是浏览器 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>

Answer 1

试试这个 (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');
});

Answer 2

为寻求 CSS 唯一解决方案的未来读者提供的答案。您可以根据 Bootstrap container.

的 1/2 宽度来计算边距。

Left-align Bootstrap 容器：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);
  }
}

让DIV突破Bootstrap4个容器

Let DIV break out of Bootstrap 4 container

html

javascript

css

slick.js

bootstrap-4