使Bootstrap的Carousel既中心又响应？

Question

我希望我的轮播图像位于中心(水平),默认情况下不是这样.我按照这个主题的解决方案.

但是,使用此解决方案,当轮播调整大小并小于图像时,将裁剪图像而不是默认缩放.

我怎样才能使我的图像居中,但让它延伸到旋转木马项目？

Answer 1

现在(在Boostrap 3和4上)简单地说:

.carousel-inner img {
  margin: auto;
}

Answer 2

我假设你有不同大小的图像.我自己测试了这个,它就像你描述的那样工作(总是居中,图像宽度适当)

/*CSS*/
div.c-wrapper{
    width: 80%; /* for example */
    margin: auto;
}

.carousel-inner > .item > img, 
.carousel-inner > .item > a > img{
width: 100%; /* use this, or not */
margin: auto;
}

<!--html-->
<div class="c-wrapper">
<div id="carousel-example-generic" class="carousel slide">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="http://placehold.it/600x400">
      <div class="carousel-caption">
        hello
      </div>
    </div>
        <div class="item">
      <img src="http://placehold.it/500x400">
      <div class="carousel-caption">
        hello
      </div>
    </div>
    <div class="item">
      <img src="http://placehold.it/700x400">
      <div class="carousel-caption">
        hello
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="icon-prev"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="icon-next"></span>
  </a>
</div>
</div>

由于变化的高度,这会产生"跳跃"...要解决这个问题,请尝试以下方法:选择列表中最高的图像

或使用媒体查询来设置自己的固定高度.

Answer 3

在Boostrap 4上，只需将其添加mx-auto到轮播图片类中。

<div class="carousel-item">
  <img class="d-block mx-auto" src="http://placehold.it/600x400" />
</div> 

根据需要与引导传送带文档中的样本合并。