Bootstrap Karussell Rutsche "Gegenstand aktiv" Sprung von oben

Question

Guten Abend.

Ich habe ein Problem mit meinem Karussell Slide. am Anfang, jede Folie Sprungform oben + - 5 px runter. Also änderte ich dies:

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

zu

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

    width: 880px; 
} 

nun dieses Problem behoben wurde. Das einzige Problem ist, die Folie mit den Klassen Item und aktiven Sprüngen jetzt runter. Aber ich finde nichts, um das zu beheben.

Theres meine 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%; 
} 

Und heres mein Karussell-Code:

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

Thank you!

Mit freundlichen Grüßen Merkes Andy

Answer 1

Mai keine perfekte Lösung, aber ich versuchte, durch width: 880px; Entfernen Es scheint immer noch etwas zu springen, obwohl

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

Demo Bootply