讓DIV脫離Bootstrap 4容器

Question

我在Bootstra 4中使用了一個容器，將頁面內容放在瀏覽器中間。 到目前為止，一切正常。

但是我還需要更多。 容器內的內容應在左側斷開，並應擴展到瀏覽器窗口。 但僅在左側。

因為我使用的是光滑滑塊，所以不能在容器DIV中的單個對象上使用position:absolute或其他任何東西。 我需要整個容器內部的DIV才能增長到左側。 而且，我需要一個容器，以使其在右側與頁面的其余部分對齊。

這是我的實際代碼： https : //codepen.io/cray_code/pen/erQJey

這就是我所需要的。 幻燈片內的圖像應向左增大。 藍色背景是瀏覽器窗口：

<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

未來尋求純CSS解決方案的讀者的答案。 您可以根據Bootstrap container寬度的1/2正確計算邊距。

左對齊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);
  }
}

Answer 2

試試這個（ 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');
});