Bootstrap Carousel图像未正确对齐

Question

请看下面的图片,我们正在使用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>

Answer 1

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

__CODE__

Answer 2

使用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">

Answer 3

我遇到了同样的问题并以这种方式解决了:可以将非图像内容插入到Carousel中,因此我们可以使用它.您应该首先插入div.inner-item(在中心对齐的位置),然后在此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 4

虽然vekozlov的答案将在Bootstrap 3中起作用以使您的图像居中,但当旋转木马缩小时它将会中断:图像保留其大小而不是缩小旋转木马.

相反,在顶级轮播上执行此操作div:

<div id="my-carousel" class="carousel slide"
    style="max-width: 900px; margin: 0 auto">
    ...
</div>

这将使整个旋转木马居中并防止其超出图像宽度(即900像素或任何您想要设置的宽度).但是,当缩小旋转木马时,图像会随之缩小.

当然,您应该将此样式信息放在CSS/LESS文件中.

Answer 5

在 Bootstrap 4 中，您可以mx-auto向img标签添加类。

例如，如果您的图像宽度为 75%，它应该如下所示：

<img class="d-block w-75 mx-auto" src="image.jpg" alt="First slide">

Bootstrap 将自动转换mx-auto为：

ml-auto, .mx-auto {
    margin-left: auto !important;
}

.mr-auto, .mx-auto {
    margin-right: auto !important;
}

Answer 6

您的图像的宽度是否与 span6 完全相同？ 460px ？就我而言，对于不同的图像尺寸，我在图像上添加了高度属性，以确保它们的高度相同，并且轮播不会在图像之间调整大小。

在您的情况下，尝试设置一个高度，以便该高度与旋转木马内部 div 的宽度之间的比率与图像的纵横比相同