Bootstrap Carousel图片之间的间距

Question

我是一名bootstrap菜鸟，我的编程技巧非常基本。我想用bootstrap开发一个小型投资组合网站。但是我陷入了一个小问题：有没有办法在bootstrap carousel的每个映像之间放置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>