引导转盘映像不正确对齐

Question

请看下图，我们正在使用引导转盘旋转图像。但是，当窗口宽度较大时，图像不会与边框正确对齐。

但是bootstrap提供的carousel示例始终工作良好，无论窗口的宽度如何。遵循代码。

有人能解释为什么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">&lsaquo;</a>
      <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div>
</div>

Answer 1

我遇到了同样的问题，并以这种方式解决了它：可以将非图像内容插入到旋转木马中，这样我们就可以使用它。您应该首先插入div.inner-project（在这里您将进行中心对齐），然后在这个div中插入图像。

这是我的代码（Ruby）：

<div id="myCarousel" class="carousel slide">
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item">
            <%= image_tag "couples/1.jpg" %>
        </div> 
        <% (2..55).each do |t|%>
            <div class="item">
                <div class='inner-item'>
                    <%= image_tag "couples/#{t}.jpg" %>
                </div>
            </div> 
        <% end -%>
    </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>

和我的css代码（.scss）：

.inner-item {
    text-align: center;
    img {
        margin: 0 auto;
    }
}

Answer 2

使用bootstrap 3，只需添加响应类和中心类：

 <img class="img-responsive center-block" src="img/....jpg" alt="First slide">

这会自动调整图像大小，并使图片居中。

编辑：

使用bootstrap4，只需添加img流体类

<img class="img-fluid" src="img/....jpg">

Answer 3

解决方案是将此CSS代码放入自定义CSS文件：

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