gpt4 book ai didi

javascript - 让 DIV 跳出 Bootstrap 4 容器

转载 作者:太空宇宙 更新时间:2023-11-03 22:27:33 24 4
gpt4 key购买 nike

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

但我还需要更多。容器内的内容应该在左侧突出,并且应该增长到浏览器窗口。但只在左侧。

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

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

这就是我需要的。幻灯片中的图像应该向左增长。蓝色背景是浏览器窗口:

enter image description here

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

最佳答案

为寻求纯 CSS 解决方案的 future 读者提供的答案。您可以根据 Bootstrap container 的 1/2 宽度计算 margin right。

左对齐 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);
}
}

关于javascript - 让 DIV 跳出 Bootstrap 4 容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50392425/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com