定制的 Bootstrap Carousel 无法在弯曲和间隙下正常工作

Question

我有一个定制的引导程序轮播，我没有显示一个 div，而是显示 3 个（一个在中间，50% 的在两侧）。 我的问题是我的 div 有边框，我尝试使用

display: flex

和

gap: 10px

在它们之间设置间隙，效果很好，但是当旋转木马移动时，间隙消失并再次出现，这会导致令人不快的效果。 视频
这是我的树枝代码：

<div id="newProductsCarousel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner" role="listbox">
    {% for product in products %}
    <div class="carousel-item product-item {{ loop.first ? 'active' : '' }}">
      <div class="product_card">...</div>
    </div>
    {% endfor %}
  </div>
  <button class="carousel-control-prev"  type="button" data-bs-target="#newProductsCarousel" data-bs-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#newProductsCarousel" data-bs-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  </button>
</div>

Sass 代码

//Mobile
.newProductsCarousel {
  .carousel {
    overflow: hidden;

    &-item {
      .product_card:first-child,
      .product_card:last-child {
        display: none;
      }

      .product_card {
        height: 340px;
        text-align: center;
      }
    }
  }
}
// Desktop
.newProductsCarousel {
    $fragment_width: 25%;

    .carousel-item-next:not(.carousel-item-start),
    .carousel-item-end.active {
      -webkit-transform: translateX(33%);
      transform: translateX(33%);
    }
    .carousel-item-prev:not(.carousel-item-end),
    .carousel-item-start.active {
     -webkit-transform: translateX(-33%);
      transform: translateX(-33%);
    }

    .carousel {
      &-inner {
        width: (100% - 2 * $fragment_width) * 3;
        left: 3 * $fragment_width - 100%;
      }

      &-item {
        &.active {
          display: flex;
          column-gap: 20px;
        }

        .product_card {
          display: block !important;
          height: 340px;
          width: 33.33333333%;
          float: left;
          text-align: center;
          position: relative;
          padding: 30px 0;
        }
      }
    }
  }

JS代码：

    $('.carousel-item.product-item').each(function () {
        var next = $(this).next();
        if (!next.length) {
            next = $(this).siblings(':first');
        }
        next.children(':first-child').clone().appendTo($(this));
    }).each(function () {
        var prev = $(this).prev();
        if (!prev.length) {
            prev = $(this).siblings(':last');
        }
        prev.children(':nth-last-child(2)').clone().prependTo($(this));
    });

我尝试给出显示：flex;对于所有旋转木马项目，但它不起作用，它使我的旋转木马无法移动。 我也尝试将马林赋予中间的div，但它产生了相同的效果。

Answer 1

使用边距怎么样，比如

margin-right

？

.carousel-item {
  margin-right: 10px;
}