引導轉盤左，右導航問題

我複製以下carousel爲引導3.當第一次加載它，它看起來不錯。引導轉盤左，右導航問題

但是，當我點擊左或右導航底部擴張（我圈起來的紅色）：

下面是代碼：

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

我直接從網站複製它，所以我不知道爲什麼它發生。任何幫助，將不勝感激

來源

2016-04-27 adviner

下面你有圖像的差異在第一行鏈接時，你已經使用IMG SRC低於500×500

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

給出並且在第二行，你已經使用IMG SRC低於250x250的

給出

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

這裏既有具有不同的寬度和高度的圖像保持相同的高度的單個源圖像，這樣我不能使在每個滑動差。

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

來源

2016-04-27 06:17:14

吉茲應該有更多的關注。謝謝 – adviner

歡迎:) –

引導轉盤左，右導航問題

回答

相關問題