请求协助：将Bootstrap 4轮播组件适配移动端响应式

我看了你的轮播代码，问题出在桌面端的三列布局到了移动端会变成每张图片占满一行，导致每个轮播项里堆叠三张图，滑动体验完全不符合移动端用户的习惯。下面给你调整后的方案，既保留桌面端的三列展示逻辑，又让移动端能实现单张图片滑动的友好体验：

<div class="brain_sliders" style="position: relative;">
  <div id='brain_sliders' class="carousel slide" data-ride="carousel" data-pause="hover">
    <div class="carousel-inner">
      <!-- 桌面端专属：三列轮播组 -->
      <div class="carousel-item active d-md-block">
        <div class="row no-gutters">
          <div class="col-md-4">
            <img class="d-block w-100" src="https://in.bmscdn.com/showcaseimage/eventimage/super-30-10-07-2019-05-32-06-583.jpg" alt="Slide 1">
          </div>
          <div class="col-md-4">
            <img class="d-block w-100" src="https://in.bmscdn.com/showcaseimage/eventimage/midori-with-pianist-ieva-jokubaviciute-05-07-2019-12-08-11-888.jpg" alt="Slide 2">
          </div>
          <div class="col-md-4">
            <img class="d-block w-100" src="https://in.bmscdn.com/showcaseimage/eventimage/bade-miyan-deewane-10-07-2019-03-32-41-494.jpg" alt="Slide 3">
          </div>
        </div>
      </div>
      <div class="carousel-item d-md-block">
        <div class="row no-gutters">
          <div class="col-md-4">
            <img class="d-block w-100" src="https://in.bmscdn.com/showcaseimage/eventimage/mahabharata--the-epic-tale-10-07-2019-11-24-21-041.jpg" alt="Slide 4">
          </div>
          <div class="col-md-4">
            <img class="d-block w-100" src="https://in.bmscdn.com/showcaseimage/eventimage/midori-with-pianist-ieva-jokubaviciute-05-07-2019-12-08-11-888.jpg" alt="Slide 5">
          </div>
          <div class="col-md-4">
            <img class="d-block w-100" src="https://in.bmscdn.com/showcaseimage/eventimage/bade-miyan-deewane-10-07-2019-03-32-41-494.jpg" alt="Slide 6">
          </div>
        </div>
      </div>

      <!-- 移动端专属：单张轮播项 -->
      <div class="carousel-item d-block d-md-none">
        <img class="d-block w-100" src="https://in.bmscdn.com/showcaseimage/eventimage/super-30-10-07-2019-05-32-06-583.jpg" alt="Slide 1">
      </div>
      <div class="carousel-item d-block d-md-none">
        <img class="d-block w-100" src="https://in.bmscdn.com/showcaseimage/eventimage/midori-with-pianist-ieva-jokubaviciute-05-07-2019-12-08-11-888.jpg" alt="Slide 2">
      </div>
      <div class="carousel-item d-block d-md-none">
        <img class="d-block w-100" src="https://in.bmscdn.com/showcaseimage/eventimage/bade-miyan-deewane-10-07-2019-03-32-41-494.jpg" alt="Slide 3">
      </div>
      <div class="carousel-item d-block d-md-none">
        <img class="d-block w-100" src="https://in.bmscdn.com/showcaseimage/eventimage/mahabharata--the-epic-tale-10-07-2019-11-24-21-041.jpg" alt="Slide 4">
      </div>
      <div class="carousel-item d-block d-md-none">
        <img class="d-block w-100" src="https://in.bmscdn.com/showcaseimage/eventimage/midori-with-pianist-ieva-jokubaviciute-05-07-2019-12-08-11-888.jpg" alt="Slide 5">
      </div>
      <div class="carousel-item d-block d-md-none">
        <img class="d-block w-100" src="https://in.bmscdn.com/showcaseimage/eventimage/bade-miyan-deewane-10-07-2019-03-32-41-494.jpg" alt="Slide 6">
      </div>
    </div>

    <a class="carousel-control-prev" href="#brain_sliders" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#brain_sliders" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

<style>
/* 桌面端轮播布局优化 */
@media (min-width: 768px) {
  #brain_sliders .carousel-inner {
    display: flex;
  }
  #brain_sliders .carousel-item {
    flex: 0 0 100%;
    max-width: 100%;
  }
  /* 移除列间距，让图片无缝衔接 */
  .row.no-gutters {
    margin-right: 0;
    margin-left: 0;
  }
  .row.no-gutters > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}
</style>

关键改动说明： #

1. 双结构适配不同设备：
   • 桌面端（屏幕≥768px）保留你原本的三列轮播组，通过d-md-block类控制仅在桌面显示
   • 移动端（屏幕<768px）使用单独的单张图片轮播项，通过d-block d-md-none类控制仅在移动端显示
2. 布局细节优化：
   • 给桌面端的行添加no-gutters类，移除列间距，让三张图片无缝衔接
   • 桌面端给carousel-inner添加flex布局，确保每个轮播组占满容器宽度，滑动更流畅
3. 交互体验升级：
   • 移动端每次滑动切换单张图片，符合移动端用户的操作习惯；桌面端仍保持一次切换三张的逻辑，不破坏原有设计

如果之后你想让桌面端也支持单张滑动，可以再调整CSS逻辑，但当前方案完美解决了你提到的移动端无法正常响应的问题。

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