我在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>
答案 0 :(得分: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');
});
答案 1 :(得分: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);
}
}