ブートストラップカルーセルの画像間の間隔

Question

私はブートストラップ新人です。プログラミングスキルは非常に基本的です。私は、ブートストラップを持つ小さなポートフォリオWebサイトを開発したいと考えています。しかし、私は小さな問題に悩まされました：ブートストラップカルーセルの各イメージの間に10 pxの小さなギャップを置く方法はありますか？

ご協力いただければ幸いです。

おかげ

Answer 1

あなたは直接ブートストラップクラスのスタイルを設定することができます。

var items = document.getElementsByClassName('item'); 
 

 
var timer = setInterval(function() { 
 
    for(var i = 0, len = items.length; i < len; i++) { 
 
    if(items[i].classList.contains('active')) { 
 
     items[i].classList.remove('active'); 
 
     
 
     if(i+1 >= len) { 
 
     items[0].classList.add('active'); 
 
     } 
 
     else { 
 
     items[i+1].classList.add('active'); 
 
     } 
 
    } 
 
    
 
    } 
 
}, 3000);

#carousel img { 
 
    padding: 10px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div id="carousel" class="carousel slide" data-ride="carousel"> 
 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item"> 
 
     <img src="http://placecage.com/1000/1000" alt="..."> 
 
     <div class="carousel-caption"> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://placecage.com/750/1000" alt="..."> 
 
     <div class="carousel-caption"> 
 
     </div> 
 
    </div> 
 
    <div class="item active"> 
 
     <img src="http://placecage.com/gif/1000/1000" alt="..."> 
 
     <div class="carousel-caption"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>