Bootstrap Carousel Caption 在转换完成后移动

Question

我所做的是使用引导轮播创建一个网页。

问题在于，当转换发生时，文本处于一个高度。一旦移动完成（在暂停序列期间），文本就会移动。如果您仔细观察，可以在这里看到一个示例www.r3gamers.com（它现在移动了大约 2px）。

问题是，在我最近的编辑中，情况变得更糟了。它现在向下跳跃约 50px，我不知道如何保持高度与它在过渡时相同。我可以通过填充和边距调整文本的高度，但这并不限制文本跳跃的数量。

我认为问题是由裁剪图像尺寸引起的，但我不确定。

php代码

echo'<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>';
        for ($i = 1; $i < $rows; $i++){
        echo'<li data-target="#carousel-example-generic" data-slide-to="'.$i.'"></li>';
        }
   echo'</ol>

      <!-- Wrapper for slides -->';
      $row2 = mysqli_fetch_array($r2, MYSQLI_ASSOC);
echo'<div class="carousel-inner" role="listbox">
        <div class="item active">
        <a href="Article.php?id=' . $row2['ArticleID']. '">
         <img class="cropped-top cropped-bottom" src="'.$row2["BackgroundImage"].'"></a>
          <div class="carousel-caption">
          <h3>'.$row2['ArticleTitle'].'</h3>
          <h4>Written by '.$row2['Username'].'</h4>  
          </div>
        </div>';
    while ($row2 = mysqli_fetch_array($r2, MYSQLI_ASSOC)) {
    echo'<div class="item">
          <a href="Article.php?id=' . $row2['ArticleID']. '">
           <img class="shading cropped-top cropped-bottom" src="'.$row2["BackgroundImage"].'"></a>
                <div class="carousel-caption">
                <h3>'.$row2['ArticleTitle'].'</h3>
                <h4>Written by '.$row2['Username'].'</h4>    
                </div>
        </div>';
    }
echo'</div>

      <!-- Controls -->
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>';

CSS

@media screen and (min-width: 768px)
.carousel-caption {
  right: 20%;
  left: 20%;
  padding-bottom: 300px;
}
.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 50px;
  left: 15%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 300px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

除了这两个字段之外，我看不到任何会影响轮播的 css，但如果有任何人能想到的，我会添加它。

任何关于为什么会发生这种情况或如何解决它的帮助都会很棒。

Answer 1

将.item.active 类的值bottom:-11%; 交换为bottom: -10.7%;，如下所述：

/* line 6058 in bootstrap.css */

@media not all, (-webkit-transform-3d)
.carousel-inner > .item.next.left, .carousel-inner > .item.prev.right, .carousel-inner > .item.active {
    left: 0;
    bottom: -10.7%; /* <= Exchange bottom value for this <= */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}