Javascript 让DIV脱离bootstrap4容器 我在Bootrua 4中使用一个容器，把我的页面的中心放在浏览器的中间。到目前为止一切正常

但我需要更多的东西。容器内的内容应在左侧展开，并扩展到浏览器窗口。但只在左边

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

这是我的实际代码：

这就是我需要的。幻灯片内的图像应向左延伸。 蓝色背景是浏览器窗口：

试试这个

HTML:

试试这个

HTML:

---

这是未来读者寻求CSS唯一解决方案的答案。您可以根据引导容器宽度的1/2计算右边距

左对齐引导容器：

---

这是未来读者寻求CSS唯一解决方案的答案。您可以根据引导容器宽度的1/2计算右边距

左对齐引导容器：

---

谢谢，但那不是我需要的。我想把滑块放在容器里，让它在一边长出来。它应该留在页面中间另一边的容器中。@Cray我无法想象结果。如果你有一个例子，它将有助于我添加了一个图像，看起来光滑的滑块，它应该由光滑的滑块完成@克莱伊不明白这有什么用，对不起。谢谢，但那不是我需要的。我想把滑块放在容器里，让它在一边长出来。它应该留在页面中间另一边的容器中。@Cray我无法想象结果。如果你有一个例子，它将有助于我添加了一个图像，看起来光滑的滑块，它应该由光滑的滑块完成@CrayI不明白这有什么帮助，抱歉。除非使用两个容器或一个流体容器，否则无法在引导中执行此操作。除非使用两个容器或一个流体容器，否则无法在引导中执行此操作。

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

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

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

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