Bootstrap 轮播图像未正确对齐

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

但是，无论窗口的宽度如何，bootstrap 提供的轮播示例始终可以正常工作。遵循代码。

有人可以解释为什么轮播的行为不同吗？ 这与图像大小或缺少某些引导配置有关吗？

<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 文件中：

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