gpt4 book ai didi

javascript - 如何修复 Bootstrap 中的轮播框?

转载 作者:行者123 更新时间:2023-11-30 10:15:59 25 4
gpt4 key购买 nike

有谁知道即使图片尺寸不同,如何在 bootstrap 中修复 carousel box 容器?因为在我当前的代码中,它会滑动,但框会根据图片大小不断变化。

代码:

<h1>Carousel</h1>
<div class="container">
<div class="row">
<div class="well col-md-6">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active"><img src="images/1.jpg" /><div class="carousel-caption">image 1</div></div>
<div class="item"><img src="images/2.jpg" /><div class="carousel-caption">image 2</div></div>
<div class="item"><img src="images/3.jpg" /><div class="carousel-caption">image 3</div></div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>

脚本:

<script type="text/javascript">
$(document).ready(function(){
$('.carousel').carousel({
interval: 2000
})
});
</script>

最佳答案

这样就可以了

   #myCarousel {
width: 400px; // define suitable width here

}

.item img {
max-width: 100%;
}

max-width 会防止图片溢出轮播

关于javascript - 如何修复 Bootstrap 中的轮播框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23644286/

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