Bootstrap Karussell left right nav Ausgabe

Ich kopierte die folgenden carousel für Bootstrap 3. Beim ersten Laden, sieht es gut aus.Bootstrap Karussell left right nav Ausgabe

Aber wenn ich auf klicken Sie entweder auf der linken oder rechten Navigations die unteren ausdehnt (I umkreiste es in rot):

Hier ist der Code:

<!DOCTYPE html> 
<html> 

<head> 
    <title></title> 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

    <style> 
     .carousel-control { 
      padding-top: 10%; 
      width: 5%; 
     } 
    </style> 

</head> 

<body> 

    <div class="container"> 
     <div class="col-md-12"> 
      <h1>Bootstrap 3 Thumbnail Slider</h1> 

      <div class="well"> 
       <div id="myCarousel" class="carousel slide"> 

        <!-- Carousel items --> 
        <div class="carousel-inner"> 
         <div class="item active"> 
          <div class="row"> 
           <div class="col-sm-3"> 
            <a href="#x"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a> 
           </div> 
           <div class="col-sm-3"> 
            <a href="#x"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a> 
           </div> 
           <div class="col-sm-3"> 
            <a href="#x"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a> 
           </div> 
           <div class="col-sm-3"> 
            <a href="#x"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a> 
           </div> 
          </div> 
          <!--/row--> 
         </div> 
         <!--/item--> 
         <div class="item"> 
          <div class="row"> 
           <div class="col-sm-3"> 
            <a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a> 
           </div> 
           <div class="col-sm-3"> 
            <a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a> 
           </div> 
           <div class="col-sm-3"> 
            <a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a> 
           </div> 
           <div class="col-sm-3"> 
            <a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a> 
           </div> 
          </div> 
          <!--/row--> 
         </div> 
         <!--/item--> 
         <div class="item"> 
          <div class="row"> 
           <div class="col-sm-3"> 
            <a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a> 
           </div> 
           <div class="col-sm-3"> 
            <a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a> 
           </div> 
           <div class="col-sm-3"> 
            <a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a> 
           </div> 
           <div class="col-sm-3"> 
            <a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a> 
           </div> 
          </div> 
          <!--/row--> 
         </div> 
         <!--/item--> 
        </div> 
        <!--/carousel-inner--> <a class="left carousel-control" href="#myCarousel" data-slide="prev">&#60;</a> 

        <a class="right carousel-control" href="#myCarousel" data-slide="next">&#62;</a> 
       </div> 
       <!--/myCarousel--> 
      </div> 
      <!--/well--> 
     </div> 
    </div> 


    <script language="javascript"> 

     $(document).ready(function() { 
      $('#myCarousel').carousel({ 
       interval: 10000 
      }) 

      $('#myCarousel').on('slid.bs.carousel', function() { 
       //alert("slid"); 
      }); 

     }); 

    </script> 

</body> 
</html>

Ich kopierte es direkt von der Website, so dass ich nicht sicher bin, warum es passiert. Jede mögliche Hilfe würde

Quelle

2016-04-27 adviner

geschätzt werden unter Ihnen Unterschied in der Bild haben die Verknüpfung in der ersten Reihe haben Sie img src verwendet, wie unten 500x500 gegeben

<img src="http://placehold.it/500x500" alt="Image" class="img-responsive">

und in der zweiten Reihe haben Sie img src verwendet, wie unten 250x250 gegeben

Hier haben beide unterschiedliche Breite und Höhe des Bildes halten Single-Source-Bild der gleichen Höhe, so dass ich keinen Unterschied in jeder Folie machen konnte.

<div class="item active"> 
    <div class="row"> 
    <div class="col-sm-3"> 
     <a href="#x"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a> 
    </div> 
    <div class="col-sm-3"> 
     <a href="#x"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a> 
    </div> 
    <div class="col-sm-3"> 
     <a href="#x"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a> 
    </div> 
    <div class="col-sm-3"> 
     <a href="#x"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a> 
    </div> 
    </div> 
    <!--/row--> 
</div> 
<!--/item--> 
<div class="item"> 
    <div class="row"> 
    <div class="col-sm-3"> 
     <a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a> 
    </div> 
    <div class="col-sm-3"> 
     <a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a> 
    </div> 
    <div class="col-sm-3"> 
     <a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a> 
    </div> 
    <div class="col-sm-3"> 
     <a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a> 
    </div> 
    </div> 
    <!--/row--> 
</div>

Quelle

2016-04-27 06:17:14

Geez sollte mehr Aufmerksamkeit geschenkt haben. Danke – adviner

Gern geschehen :) –

Bootstrap Karussell left right nav Ausgabe

Antwort

Verwandte Themen