Bootstrap Carousel幻灯片“item active”从顶部跳转答案

【问题标题】：Bootstrap Carousel slide "item active" jump from topBootstrap Carousel幻灯片“item active”从顶部跳转
【发布时间】：2016-07-11 05:22:03
【问题描述】：

晚上好。

我的轮播幻灯片有问题。在开始时，每张幻灯片都从顶部跳转 +- 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%;
}

这是我的轮播代码：

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

谢谢！

真诚的默克斯安迪

【问题讨论】：

标签： html css carousel slide

【解决方案1】：

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

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

Demo Bootply

【讨论】：

现在每张幻灯片都会跳：P 但没有人应该跳。