Bootstrap 4 carousel 显示 3 个项目，但实际页面仅显示 1 个图像

Question

我制作了一个test page（现在上线），带有一个应该显示 3 张图像并前进的轮播。我试图按照https://www.codeply.com/go/s3I9ivCBYH/bootstrap-4-responsive-carousel-one-at-a-time 中的代码在我的页面上一次只显示一个图像。我从 codeply 复制了代码并修改了我的图像的 src。我将 css 添加到链接的 custombs4.css 页面中，并在页面底部添加了 javascript。

你能帮我解决这个问题吗？提前谢谢

<--- at the bottom of the page before closing body tag --->
$('#carouselExample').on('slide.bs.carousel', function (e) {

    var $e = $(e.relatedTarget);
    var idx = $e.index();
    var itemsPerSlide = 3;
    var totalItems = $('.carousel-item').length;
    
    if (idx >= totalItems-(itemsPerSlide-1)) {
        var it = itemsPerSlide - (totalItems - idx);
        for (var i=0; i<it; i++) {
            // append slides to end
            if (e.direction=="left") {
                $('.carousel-item').eq(i).appendTo('.carousel-inner');
            }
            else {
                $('.carousel-item').eq(0).appendTo('.carousel-inner');
            }
        }
    }
});

<--- css linked on :http://www.pscompetitiveedge.com/css/custombs4.css --->
media (min-width: 768px) {

    /* show 3 items */
    .carousel-inner .active,
    .carousel-inner .active + .carousel-item,
    .carousel-inner .active + .carousel-item + .carousel-item {
        display: block;
    }
    
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
        transition: none;
    }
    
    .carousel-inner .carousel-item-next,
    .carousel-inner .carousel-item-prev {
      position: relative;
      transform: translate3d(0, 0, 0);
    }
    
    .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -33.3333%;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    
    /* left or forward direction */
    .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .carousel-item-next.carousel-item-left + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    
    /* farthest right hidden item must be abso position for animations */
    .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    
    /* right or prev direction */
    .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .carousel-item-prev.carousel-item-right + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }

}

<div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="3000">
        
<div class="carousel-inner row w-100 mx-auto" role="listbox">
            
<div class="carousel-item col-md-4 active">
                
<img class="img-fluid mx-auto d-block" src="slide/1.jpg" alt="teamwork">
            
</div>         
<div class="carousel-item col-md-4">
                
<img class="img-fluid mx-auto d-block" src="slide/2.jpg" alt="fire eating">
            
</div>
            
<div class="carousel-item col-md-4">
                
<img class="img-fluid mx-auto d-block" src="slide/3.jpg" alt="fire walk">
            
</div>
            
<div class="carousel-item col-md-4">
                
<img class="img-fluid mx-auto d-block" src="slide/4.jpg" alt="trust fall">
            
</div>
            
<div class="carousel-item col-md-4">
                
<img class="img-fluid mx-auto d-block" src="slide/5.jpg" alt="trust fall 2">
            
</div>
            
<div class="carousel-item col-md-4">
                
<img class="img-fluid mx-auto d-block" src="slide/6.jpg" alt="crew">
            
</div>
            
<div class="carousel-item col-md-4">
                
<img class="img-fluid mx-auto d-block" src="slide/7.jpg" alt="fire eating 2">
            
</div>
            
<div class="carousel-item col-md-4">
                
<img class="img-fluid mx-auto d-block" src="slide/8.jpg" alt="fire eating 3">
            
</div>
        
</div>
        
<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
            
<i class="fa fa-chevron-left fa-lg text-muted"></i>
            
<span class="sr-only">Previous</span>
        
</a>
        
<a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
            
<i class="fa fa-chevron-right fa-lg text-muted"></i>
            
<span class="sr-only">Next</span>
        
</a>

Answer 1

问题出在custombs4.css 的第 320 行，您在媒体之前缺少@。这使它像media 标签，您不会注意到任何问题。修复后一切正常

之前

之后