ブートストラップカルーセル左のナビゲーション問題

ブートストラップ3のために次のようにコピーしました。carouselを最初にロードしたときに見栄えが良いです。ブートストラップカルーセル左のナビゲーション問題

しかし、私は、左または右のナビゲーションのいずれかに下膨張する（私は赤で、それを丸で囲んだ）クリック：ここで

をコードです：

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

が500×500

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

は下記250×250

以下に示すように、第2行目にあなたはIMG srcを使用しているようにあなたがIMG srcを使用した最初の行にリンクする画像の差を有して理解されるであろう

<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

あなたは歓迎です:) –

ブートストラップカルーセル左のナビゲーション問題

答えて

関連する問題