ブートストラップカルーセルでは、画像と.carousel divの間のスペースをどうやって削除しますか？

画像の右側に灰色の領域（画像の下に表示）があります。カルーセルの内側に画像を配置すると、画像の左右に均等に灰色の領域が分割されます。これを取り除き、カルーセルを画像と同じサイズにする方法はありますか？あなたのイメージに基づいてブートストラップカルーセルでは、画像と.carousel divの間のスペースをどうやって削除しますか？

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Test</title> 
 

 
    <!-- Latest compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
    <!-- jQuery library --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
    <!-- Latest compiled JavaScript --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
    <style> 
 
     .item { 
 
      max-height: 400px; 
 
     } 
 

 
    </style> 
 
</head> 
 

 
<body> 
 
    <!------------nav bar ----------------------> 
 
    <nav class="navbar navbar-default"> 
 
     <div class="container-fluid"> 
 
      <div class="navbar-header"> 
 
       <a class="navbar-brand" href="#">HOME</a> 
 
      </div> 
 
      <ul class="nav navbar-nav"> 
 
       <li><a href="#">GALLERY</a></li> 
 
       <li><a href="#">REFERENCES</a></li> 
 
      </ul> 
 
     </div> 
 
    </nav> 
 

 

 
    <!--------------Centering div ---------------> 
 
    <div class="container-fluid"> 
 
     <div class="row"> 
 
      <div class="col-md-offset-1 col-md-10"> 
 
       <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
        <!-- Indicators --> 
 
        <ol class="carousel-indicators"> 
 
         <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
         <li data-target="#myCarousel" data-slide-to="1"></li> 
 
         <li data-target="#myCarousel" data-slide-to="2"></li> 
 
        </ol> 
 

 
        <!-- Wrapper for slides --> 
 
        <div class="carousel-inner"> 
 
         <div class="item active"> 
 
          <img src="http://res.cloudinary.com/dstd7egax/image/upload/v1497784186/davinciSelf_lma2vh.jpg"> 
 
         </div> 
 

 
         <div class="item"> 
 
          <img class src="http://res.cloudinary.com/dstd7egax/image/upload/v1497784193/Madonna_i9fj4t.png" alt="Chicago"> 
 
         </div> 
 

 
         <div class="item"> 
 
          <img src="http://res.cloudinary.com/dstd7egax/image/upload/v1497784183/davinciSketch_zs4fv5.jpg" alt="New York"> 
 
         </div> 
 
        </div> 
 

 
        <!-- Left and right controls --> 
 
        <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
 
         <span class="glyphicon glyphicon-chevron-left"></span> 
 
         <span class="sr-only">Previous</span> 
 
        </a> 
 
        <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
 
         <span class="glyphicon glyphicon-chevron-right"></span> 
 
         <span class="sr-only">Next</span> 
 
        </a> 
 
       </div> 
 

 

 
      </div> 
 

 
     </div> 
 

 
    </div> 
 

 
</body> 
 

 
</html>

余分なスペース

出典

2017-06-18 Enzio

が800ピクセル幅であり、このルールは

#myCarousel { 
    margin: 0 auto; 
    max-width: 800px; 
}

スタックが

スニペットことを修正します

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Test</title> 
 

 
    <!-- Latest compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
    <!-- jQuery library --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
    <!-- Latest compiled JavaScript --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
    <style> 
 
     .item { 
 
      max-height: 400px; 
 
     } 
 
     #myCarousel { 
 
      margin: 0 auto; 
 
      max-width: 800px; 
 
     } 
 

 
    </style> 
 
</head> 
 

 
<body> 
 
    <!------------nav bar ----------------------> 
 
    <nav class="navbar navbar-default"> 
 
     <div class="container-fluid"> 
 
      <div class="navbar-header"> 
 
       <a class="navbar-brand" href="#">HOME</a> 
 
      </div> 
 
      <ul class="nav navbar-nav"> 
 
       <li><a href="#">GALLERY</a></li> 
 
       <li><a href="#">REFERENCES</a></li> 
 
      </ul> 
 
     </div> 
 
    </nav> 
 

 

 
    <!--------------Centering div ---------------> 
 
    <div class="container-fluid"> 
 
     <div class="row"> 
 
      <div class="col-md-offset-1 col-md-10"> 
 
       <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
        <!-- Indicators --> 
 
        <ol class="carousel-indicators"> 
 
         <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
         <li data-target="#myCarousel" data-slide-to="1"></li> 
 
         <li data-target="#myCarousel" data-slide-to="2"></li> 
 
        </ol> 
 

 
        <!-- Wrapper for slides --> 
 
        <div class="carousel-inner"> 
 
         <div class="item active"> 
 
          <img src="http://res.cloudinary.com/dstd7egax/image/upload/v1497784186/davinciSelf_lma2vh.jpg"> 
 
         </div> 
 

 
         <div class="item"> 
 
          <img class src="http://res.cloudinary.com/dstd7egax/image/upload/v1497784193/Madonna_i9fj4t.png" alt="Chicago"> 
 
         </div> 
 

 
         <div class="item"> 
 
          <img src="http://res.cloudinary.com/dstd7egax/image/upload/v1497784183/davinciSketch_zs4fv5.jpg" alt="New York"> 
 
         </div> 
 
        </div> 
 

 
        <!-- Left and right controls --> 
 
        <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
 
         <span class="glyphicon glyphicon-chevron-left"></span> 
 
         <span class="sr-only">Previous</span> 
 
        </a> 
 
        <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
 
         <span class="glyphicon glyphicon-chevron-right"></span> 
 
         <span class="sr-only">Next</span> 
 
        </a> 
 
       </div> 
 

 

 
      </div> 
 

 
     </div> 
 

 
    </div> 
 

 
</body> 
 

 
</html>

出典

2017-06-18 11:40:24 LGSon

ありがとうございます。それはそれを修正した。 – Enzio

@Enzioようこそ。私の答えを受け入れることを忘れないでください。また、upvoteは、あなたが代理人を得たときに、いいだろう。それをするために：） – LGSon

ワンクイックフィックス、このCSSを追加します。

.carousel-control.right, 
.carousel-control.left { 
    background: transparent!important; 
}

灰色の領域コントロールボタンの背景色です。イメージが左に整列しても、それはまだそこにあります、それはちょうど見るのがより難しいです。

チェックhere

出典

2017-06-18 11:45:20 jack

ブートストラップカルーセルでは、画像と.carousel divの間のスペースをどうやって削除しますか？

答えて

関連する問題