我想使用 Bootstrap 制作一个带有 1 张水平图片和(下一张幻灯片)2 张垂直图片的轮播.但我不能让它们达到相同

Question

<div class="container">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- 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" role="listbox">
    <div class="item active">
        <img src="big1.JPG" alt="...">
    </div>
    <div class="item">
        <div class="row">
             <div class="col-xs-6"><img src="vertical2.JPG" class="img-responsive"></div>
             <div class="col-xs-6"><img src="vertical2.JPG" class="img-responsive"></div>
        </div>
    </div>
  </div>
    </div>

这是我的代码，我的垂直和水平图片具有相同的高度（256 px），但垂直图片看起来有点长。我试图通过以下方式解决这个问题：为容器元素添加 256px 高度和高度：100%;到我的垂直图片，但它不起作用。我将非常感谢您的建议。谢谢。

Answer 1

1. 您必须确保您的垂直图像具有与大图像相同的高度和 50% 的宽度。
2. 您必须删除垂直图像之间的间隙。

.CSS：

.item .row {
  margin: 0;
}
.item [class*="col"] {
  padding: 0;
}

代码笔

如果您有不同宽度的图片，则必须为轮播中的所有图片设置固定高度。

.carousel .item img {
  height: 200px;
}