html - Bootstrap Carousel slide "item active"从顶部跳转

Question

晚上好。

我的旋转木马幻灯片有问题。一开始，每张幻灯片从顶部跳转 +- 5 px 向下。所以我改变了这个:

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

到

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

  width: 880px;
}

现在这是固定的。唯一的问题是，带有类元素和事件的幻灯片现在向下跳。但我找不到任何解决这个问题的方法。

这是我的 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%;
}

这是我的 Carousel 代码:

<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 -->

谢谢!

真诚的默克安迪

Answer 1

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

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

Demo Bootply