请看下图,我们使用bootstrap carousel来旋转图像。但是,当窗口宽度较大时,图像不能与边框正确对齐。
但是,无论窗口的宽度如何,bootstrap提供的carousel示例总是工作得很好。遵循代码。
有人能解释一下为什么旋转木马的表现不同吗?这是否与映像大小或缺少某些引导配置有关?
<section id="carousel">
<div class="hero-unit span6 columns">
<h2>Welcome to TACT !</h2>
<div id="myCarousel" class="carousel slide" >
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active" >
<img alt="" src="/eboxapps/img/3pp-1.png">
<div class="carousel-caption">
<h4>1. Need a 3rd party jar?</h4>
</div>
</div>
<div class="item">
<img alt="" src="/eboxapps/img/3pp-2.png">
<div class="carousel-caption">
<h4>2. Create Request</h4>
</div>
</div>
<div class="item">
<img alt="" src="/eboxapps/img/3pp-3.png">
<div class="carousel-caption">
<h4>3. What happens?</h4>
</div>
</div>
<div class="item">
<img alt="" src="/eboxapps/img/3pp-4.png">
<div class="carousel-caption">
<h4>4. Status is Emailed</h4>
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
发布于 2013-03-27 21:59:04
解决方案是将此CSS代码放入自定义CSS文件中:
.carousel-inner > .item > img {
margin: 0 auto;
}
发布于 2014-08-23 02:37:13
使用bootstrap 3,只需添加响应类和中心类:
<img class="img-responsive center-block" src="img/....jpg" alt="First slide">
这会自动调整图像大小,并使图片居中。
编辑:
对于bootstrap 4,只需添加img-fluid
类
<img class="img-fluid" src="img/....jpg">
发布于 2013-09-07 07:13:44
虽然vekozlov的答案将在Bootstrap 3中工作,以使图像居中,但它将在旋转木马缩小时中断:图像保持其大小,而不是随旋转木马缩小。
相反,应在顶级轮播div
上执行此操作
<div id="my-carousel" class="carousel slide"
style="max-width: 900px; margin: 0 auto">
...
</div>
这将使整个旋转木马居中,并防止它超出图像的宽度(即900像素或任何您想要设置的值)。但是,当旋转木马缩小时,图像也随之缩小。
当然,您应该将此样式信息放入CSS/LESS文件中。
https://stackoverflow.com/questions/10591422
复制相似问题