引导旋转木马幻灯片"item active"从顶部跳跃

Question

晚上好。

我的旋转木马幻灯片有问题。开始时，每一张幻灯片都从顶部往下跳+-5像素。所以我改了这个：

    .carousel-inner > .prev {
  position: absolute;
  top: 0;
  width: 880px;
}

至

    .carousel-inner > .prev {
  position: absolute;
  width: 880px;
}

现在这个问题已经解决了。唯一的问题是，带有类项目和活动的幻灯片现在向下跳。但我找不到任何办法来解决这个问题。

There my Css:

.carousel {
  position: relative;
}
.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-right: 35px;
}
.carousel-inner > .item {
  position: relative;
  display: none;
  -webkit-transition: .6s ease-in-out left;
       -o-transition: .6s ease-in-out left;
          transition: .6s ease-in-out left;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  line-height: 1;
}
@media all and (transform-3d), (-webkit-transform-3d) {
  .carousel-inner > .item {
    -webkit-transition: -webkit-transform .6s ease-in-out;
         -o-transition:      -o-transform .6s ease-in-out;
            transition:         transform .6s ease-in-out;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    -webkit-perspective: 1000px;
            perspective: 1000px;
  }
  .carousel-inner > .item.next,
  .carousel-inner > .item.active.right {
    left: 0;
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
  .carousel-inner > .item.prev,
  .carousel-inner > .item.active.left {
    left: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
  .carousel-inner > .item.next.left,
  .carousel-inner > .item.prev.right,
  .carousel-inner > .item.active {
    left: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
  display: block;
}
.carousel-inner > .active {
  left: 0;
}
.carousel-inner > .next,
.carousel-inner > .prev {
  position: absolute;
  width: 880px;
}
.carousel-inner > .next {
  left: 100%;
}
.carousel-inner > .prev {
  left: -100%;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
  left: 0;
}
.carousel-inner > .active.left {
  left: -100%;
}
.carousel-inner > .active.right {
  left: 100%;
}

这是我的旋转木马代码：

<div class="carousel slide" id="myCarousel">
        <div class="carousel-inner">
            <div class="item active">
                    <ul class="thumbnails">
                        <li class="col-md-3">
                            <div class="thumbnail">
                              <a href="#"><img src="http://puu.sh/nOpej/23914acabc.png" alt=""></a>
                            </div>
                            <div class="caption">
                              <h4>BMW</h4><hr>
                              <h5>i8 Lux Car Performance</h5>
                              <span style="float:left;">Prix:</span><span style="float:right;">25.000€</span><br>
                              <span style="float:left;">Kilometrage:</span><span style="float:right;">12.000 km</span><br>
                             <span style="float:left;">Erstzulassung:</span><span style="float:right;">5/2015</span>
                             <a class="btn btn-mini" href="#">&raquo; Read More</a>
                            </div>
                          </li>
                          <li class="col-md-3">
                            <div class="thumbnail">
                              <a href="#"><img src="http://puu.sh/nOpej/23914acabc.png" alt=""></a>
                            </div>
                            <div class="caption">
                              <h4>BMW</h4><hr>
                              <h5>i8 Lux Car Performance</h5>
                              <span style="float:left;">Prix:</span><span style="float:right;">25.000€</span><br>
                              <span style="float:left;">Kilometrage:</span><span style="float:right;">12.000 km</span><br>
                             <span style="float:left;">Erstzulassung:</span><span style="float:right;">5/2015</span>
                             <a class="btn btn-mini" href="#">&raquo; Read More</a>
                            </div>
                          </li>
                          <li class="col-md-3">
                            <div class="thumbnail">
                              <a href="#"><img src="http://puu.sh/nOpej/23914acabc.png" alt=""></a>
                            </div>
                            <div class="caption">
                              <h4>BMW</h4><hr>
                              <h5>i8 Lux Car Performance</h5>
                              <span style="float:left;">Prix:</span><span style="float:right;">25.000€</span><br>
                              <span style="float:left;">Kilometrage:</span><span style="float:right;">12.000 km</span><br>
                             <span style="float:left;">Erstzulassung:</span><span style="float:right;">5/2015</span>
                             <a class="btn btn-mini" href="#">&raquo; Read More</a>
                            </div>
                          </li>
                          <li class="col-md-3">
                            <div class="thumbnail">
                              <a href="#"><img src="http://puu.sh/nOpej/23914acabc.png" alt=""></a>
                            </div>
                            <div class="caption">
                              <h4>BMW</h4><hr>
                              <h5>i8 Lux Car Performance</h5>
                              <span style="float:left;">Prix:</span><span style="float:right;">25.000€</span><br>
                              <span style="float:left;">Kilometrage:</span><span style="float:right;">12.000 km</span><br>
                             <span style="float:left;">Erstzulassung:</span><span style="float:right;">5/2015</span>
                             <a class="btn btn-mini" href="#">&raquo; Read More</a>
                            </div>
                          </li>
                    </ul>
              </div><!-- /Slide1 --> 
            <div class="item">
                    <ul class="thumbnails">
                        <li class="col-md-3">
                            <div class="thumbnail">
                              <a href="#"><img src="http://puu.sh/nOpej/23914acabc.png" alt=""></a>
                            </div>
                            <div class="caption">
                              <h4>BMW</h4><hr>
                              <h5>i8 Lux Car Performance</h5>
                              <span style="float:left;">Prix:</span><span style="float:right;">25.000€</span><br>
                              <span style="float:left;">Kilometrage:</span><span style="float:right;">12.000 km</span><br>
                             <span style="float:left;">Erstzulassung:</span><span style="float:right;">5/2015</span>
                             <a class="btn btn-mini" href="#">&raquo; Read More</a>
                            </div>
                          </li>
                          <li class="col-md-3">
                            <div class="thumbnail">
                              <a href="#"><img src="http://puu.sh/nOpej/23914acabc.png" alt=""></a>
                            </div>
                            <div class="caption">
                              <h4>BMW</h4><hr>
                              <h5>i8 Lux Car Performance</h5>
                              <span style="float:left;">Prix:</span><span style="float:right;">25.000€</span><br>
                              <span style="float:left;">Kilometrage:</span><span style="float:right;">12.000 km</span><br>
                             <span style="float:left;">Erstzulassung:</span><span style="float:right;">5/2015</span>
                             <a class="btn btn-mini" href="#">&raquo; Read More</a>
                            </div>
                          </li>
                          <li class="col-md-3">
                            <div class="thumbnail">
                              <a href="#"><img src="http://puu.sh/nOpej/23914acabc.png" alt=""></a>
                            </div>
                            <div class="caption">
                              <h4>BMW</h4><hr>
                              <h5>i8 Lux Car Performance</h5>
                              <span style="float:left;">Prix:</span><span style="float:right;">25.000€</span><br>
                              <span style="float:left;">Kilometrage:</span><span style="float:right;">12.000 km</span><br>
                             <span style="float:left;">Erstzulassung:</span><span style="float:right;">5/2015</span>
                             <a class="btn btn-mini" href="#">&raquo; Read More</a>
                            </div>
                          </li>
                          <li class="col-md-3">
                            <div class="thumbnail">
                              <a href="#"><img src="http://puu.sh/nOpej/23914acabc.png" alt=""></a>
                            </div>
                            <div class="caption">
                              <h4>BMW</h4><hr>
                              <h5>i8 Lux Car Performance</h5>
                              <span style="float:left;">Prix:</span><span style="float:right;">25.000€</span><br>
                              <span style="float:left;">Kilometrage:</span><span style="float:right;">12.000 km</span><br>
                             <span style="float:left;">Erstzulassung:</span><span style="float:right;">5/2015</span>
                             <a class="btn btn-mini" href="#">&raquo; Read More</a>
                            </div>
                          </li>

                    </ul>
              </div><!-- /Slide2 --> 
            <div class="item">
                    <ul class="thumbnails">
                        <li class="col-md-3">
                            <div class="thumbnail">
                              <a href="#"><img src="http://puu.sh/nOpej/23914acabc.png" alt=""></a>
                            </div>
                            <div class="caption">
                              <h4>BMW</h4><hr>
                              <h5>i8 Lux Car Performance</h5>
                              <span style="float:left;">Prix:</span><span style="float:right;">25.000€</span><br>
                              <span style="float:left;">Kilometrage:</span><span style="float:right;">12.000 km</span><br>
                             <span style="float:left;">Erstzulassung:</span><span style="float:right;">5/2015</span>
                             <a class="btn btn-mini" href="#">&raquo; Read More</a>
                            </div>
                          </li>
                          <li class="col-md-3">
                            <div class="thumbnail">
                              <a href="#"><img src="http://puu.sh/nOpej/23914acabc.png" alt=""></a>
                            </div>
                            <div class="caption">
                              <h4>BMW</h4><hr>
                              <h5>i8 Lux Car Performance</h5>
                              <span style="float:left;">Prix:</span><span style="float:right;">25.000€</span><br>
                              <span style="float:left;">Kilometrage:</span><span style="float:right;">12.000 km</span><br>
                             <span style="float:left;">Erstzulassung:</span><span style="float:right;">5/2015</span>
                             <a class="btn btn-mini" href="#">&raquo; Read More</a>
                            </div>
                          </li>
                          <li class="col-md-3">
                            <div class="thumbnail">
                              <a href="#"><img src="http://puu.sh/nOpej/23914acabc.png" alt=""></a>
                            </div>
                            <div class="caption">
                              <h4>BMW</h4><hr>
                              <h5>i8 Lux Car Performance</h5>
                              <span style="float:left;">Prix:</span><span style="float:right;">25.000€</span><br>
                              <span style="float:left;">Kilometrage:</span><span style="float:right;">12.000 km</span><br>
                             <span style="float:left;">Erstzulassung:</span><span style="float:right;">5/2015</span>
                             <a class="btn btn-mini" href="#">&raquo; Read More</a>
                            </div>
                          </li>
                          <li class="col-md-3">
                            <div class="thumbnail">
                              <a href="#"><img src="http://puu.sh/nOpej/23914acabc.png" alt=""></a>
                            </div>
                            <div class="caption">
                              <h4>BMW</h4><hr>
                              <h5>i8 Lux Car Performance</h5>
                              <span style="float:left;">Prix:</span><span style="float:right;">25.000€</span><br>
                              <span style="float:left;">Kilometrage:</span><span style="float:right;">12.000 km</span><br>
                             <span style="float:left;">Erstzulassung:</span><span style="float:right;">5/2015</span>
                             <a class="btn btn-mini" href="#">&raquo; Read More</a>
                            </div>
                          </li>
                    </ul>
              </div><!-- /Slide3 --> 
        </div>
        <div class="control-box">                            
           <br> <a data-slide="prev" href="#myCarousel" style="float:left; padding-left:5px;"><button type="button" class="btn btn-primary">Previous</button></a>
            <a data-slide="next" href="#myCarousel" style="float:right; padding-right:5px;"><button type="button" class="btn btn-primary">Next</button></a>
        </div><!-- /.control-box -->   
    </div><!-- /#myCarousel -->

谢谢！

真诚Merkes Andy

Answer 1

可能不是一个完美的解决方案，但我尝试删除width: 880px;尽管，它似乎仍在轻微跳跃

.carousel-inner > .prev {
  position: absolute;
}

演示Bootply