Bootstrap carousel左侧导航问题

Question

我为bootstrap 3复制了以下carousel。首次加载时，它看起来不错。

但是当我点击左侧或右侧导航时，底部会展开（我用红色圈出来）：

以下是代码：

#{}

我直接从网站上复制了它，所以我不确定它为什么会发生。任何帮助将不胜感激

Answer 1

下面你在第一行中使用img src的图像链接有差异，如下面给出的500x500

<img src="http://placehold.it/500x500" alt="Image" class="img-responsive">

并且在第二行中您使用了img src，如下面给出的250x250

<img src="http://placehold.it/250x250" alt="Image" class="img-responsive">

这里两个图像的宽度和高度都不同，保持相同高度的单个源图像，这样我就无法在每个幻灯片上产生差异。

<div class="item active">
  <div class="row">
    <div class="col-sm-3">
      <a href="#x"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a>
    </div>
    <div class="col-sm-3">
      <a href="#x"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a>
    </div>
    <div class="col-sm-3">
      <a href="#x"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a>
    </div>
    <div class="col-sm-3">
      <a href="#x"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a>
    </div>
  </div>
  <!--/row-->
</div>
<!--/item-->
<div class="item">
  <div class="row">
    <div class="col-sm-3">
      <a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a>
    </div>
    <div class="col-sm-3">
      <a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a>
    </div>
    <div class="col-sm-3">
      <a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a>
    </div>
    <div class="col-sm-3">
      <a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a>
    </div>
  </div>
  <!--/row-->
</div>