Bootstrap Carousel slide "item active" прыжок сверху

Question

Good Evening.

У меня проблема с моим карусельным слайдом. в начале, каждый слайд Перейти форма сверху + - 5 пикселей вниз. Так я изменил это:

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

в

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

    width: 880px; 
} 

Теперь это было зафиксировано. Единственная проблема заключается в том, что слайд с элементом классов и активные прыжки теперь вниз. Но я не нахожу ничего, чтобы исправить это.

Theres мой 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 --> 

Спасибо!

С уважением Merkes Энди

Answer 1

Может быть не идеальное решение, но я попробовал, удалив width: 880px; Он по-прежнему кажется, что прыгать немного, хотя

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

Demo Bootply