Bootstrap 4多项目卡片轮播过渡异常、移动端按钮失效问题

两个问题的核心诱因是代码存在选择器不匹配、CSS逻辑缺失、语法错误三类问题，直接按以下步骤修复即可：

问题根因 #

• 切换时卡片层叠：轮播初始化选择器写错（HTML中轮播ID为carouselExampleIndicators，JS初始化选的是不存在的#recipeCarousel），导致轮播基础逻辑未正确挂载；多卡轮播的CSS仅给激活状态的卡片项加了flex布局，过渡过程中相邻卡片项的定位、位移值没有统一规则，动画计算出错；原CSS开头的卡片样式丢失了选择器，导致卡片布局错乱。
• 移动端按钮失效：自定义箭头的伪元素设置了绝对定位但未配置层级，挡住了原生按钮的点击区域；JS代码块里嵌套了<script>标签造成语法错误，额外写的点击事件绑定的是不存在的.next/.prev类，完全没有生效；移动端媒体查询未配置单卡轮播的位移规则，切换时DOM结构错乱进一步阻塞交互。

修复步骤 #

1. 补全CSS规则
   删掉原来残缺的轮播样式，替换为以下逻辑：

.newscard {
  border: 5px solid red !important;
  border-radius: 43px;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
  padding: .8rem;
  height: 480px;
}

.card-img-top .img-fluid {
  border-radius: 30px !important;
  margin-bottom: 1.5rem;
}

.newscard .card-body h2{
  color: var(--secondaryColor);
  text-align: left;
  font-size: 1.2rem;
}

.newscard .card-body p{
  text-align: left;
  font-size: 0.7rem;
}

/* 轮播基础布局修复 */
.carousel-inner .carousel-item {
  display: flex;
  flex-wrap: nowrap;
  transition: transform 0.6s ease-in-out;
}
.carousel-inner .carousel-item .newscard {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0 10px;
}

/* 控制按钮层级修复 */
.carousel-control-prev, .carousel-control-next{
  font-size: 1.5rem;
  z-index: 10;
  width: 50px;
}
.bi-chevron-left::before, .bi-chevron-right::before {
  content: "\f284";
  color: white;
  opacity: 1;
  background: var(--maincolor);
  padding: 5px 15px;
  border-radius: 50px;
  position: absolute;
  z-index: -1;
}
.bi-chevron-left::before {
  left: -10px;
}
.bi-chevron-right::before{
  right: -10px !important;
}
.carousel-control-next-icon, .carousel-control-prev-icon {
  background: transparent no-repeat center center !important;
}
.carousel-control-next, .carousel-control-prev{
  opacity: 1 !important;
}

/* 移动端单卡轮播 */
@media (max-width: 767px) {
  .carousel-inner .carousel-item.active,
  .carousel-inner .carousel-item-next,
  .carousel-inner .carousel-item-prev {
    display: flex !important;
  }
  .carousel-inner .carousel-item-next:not(.carousel-item-left),
  .carousel-inner .carousel-item-right.active {
    transform: translateX(100%);
  }
  .carousel-inner .carousel-item-prev:not(.carousel-item-right),
  .carousel-inner .carousel-item-left.active {
    transform: translateX(-100%);
  }
}

/* 桌面端三卡轮播 */
@media (min-width: 768px) {
  .carousel-inner .carousel-item .newscard {
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }
  .carousel-inner .carousel-item-right.active,
  .carousel-inner .carousel-item-next {
    transform: translateX(33.333%);
  }
  .carousel-inner .carousel-item-left.active,
  .carousel-inner .carousel-item-prev {
    transform: translateX(-33.333%);
  }
  .carousel-inner .carousel-item-right,
  .carousel-inner .carousel-item-left{
    transform: translateX(0);
  }
}

2. 修正HTML结构
   给carousel-inner加上row类适配栅格，删掉data-ride属性的多余空格：

<div id="carouselExampleIndicators" class="carousel slide" data-ride="false">
  <div class="carousel-inner py-5 row">
    <!-- 原有卡片内容保持不变即可 -->
  </div>
  <!-- 原有控制按钮保持不变即可 -->
</div>

3. 修正JS代码
   替换为无语法错误、选择器匹配的逻辑，删掉无效的冗余点击绑定：

<script>
(function($) {
  "use strict";
  // 绑定正确的轮播ID初始化
  $('#carouselExampleIndicators').carousel({
    interval: 5000
  });
  // 多卡轮播克隆逻辑
  $('.carousel .carousel-item').each(function(){
    var next = $(this).next();
    if (!next.length) {
      next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));
    for (var i=0;i<2;i++) {
      next=next.next();
      if (!next.length) {
        next = $(this).siblings(':first');
      }
      next.children(':first-child').clone().appendTo($(this));
    }
  });
})(jQuery);
</script>

内容的提问来源于stack exchange，提问作者Marts 114