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

将班级bottom:-11%;的值.item.active兑换为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);
}

Bootstrap Carousel Caption在转换完成后移动

1 个答案: