Bootstrap Carousel图像未正确对齐 [英] Bootstrap Carousel image doesn't align properly

问题描述

请看下面的图片，我们正在使用bootstrap carousel来旋转图像。
但是，当窗口宽度很大时，图像不能正确对齐边框。

Please take a look at the following image, we are using bootstrap carousel to rotate the images. However, when the window width is large, the image doesn't align with the border properly.

但是bootstrap提供的轮播示例总是正常工作，无论窗户的宽度如何。遵循代码。

But the carousel example provided by bootstrap always works fine, no matter the width of the window. Following the code.

有人可以解释为什么旋转木马表现不同吗？
这与图像大小或某些引导程序配置有关吗？

Can someone explain why carousel is behaving differently? Is this anything to do with Image size or some bootstrap config is missing?

<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">&lsaquo;</a>
      <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div>
</div>

推荐答案

解决方案是将css代码放入自定义css文件中

The solution is to put that css code into your custom css file

.carousel-inner> .item> img {
margin：0 auto;
}

这篇关于Bootstrap Carousel图像未正确对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！