让DIV脱离Bootstrap 4容器 [英] Let DIV break out of Bootstrap 4 container
问题描述
我在Bootstra 4中使用了一个容器,将页面内容放在浏览器中间.到目前为止一切正常.
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.
因为我使用的是光滑滑块,所以不能在容器DIV中的单个对象上使用position:absolute
或其他功能.我需要在容器内将整个DIV扩展到左侧.而且我需要一个容器,以使其在右侧与页面的其余部分对齐.
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.
这是我的实际代码: 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>
推荐答案
尝试一下( 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');
});
这篇关于让DIV脱离Bootstrap 4容器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!