引导转盘图像未正确对齐
引导转盘图像未正确对齐
提问于 2012-05-15 05:34:20
请看下图，我们使用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>
回答 10
Stack Overflow用户
发布于 2013-03-27 21:59:04
解决方案是将此CSS代码放入自定义CSS文件中：
.carousel-inner > .item > img {
margin: 0 auto;
}Stack Overflow用户
发布于 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">Stack Overflow用户
发布于 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文件中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10591422
复制相关文章
相似问题