Bootstrap 5轮播图单幻灯片仅显1张卡片，如何改为显示3张？

一、实现每张幻灯片显示3张卡片（基于Bootstrap网格系统） #

完全可以用Bootstrap的row和columns实现，只需调整carousel-item内部结构，利用网格系统横向排列卡片：

1. 在每个carousel-item内添加row容器承载卡片列
2. 用col-4（大屏幕占1/3宽度）包裹单张卡片，也可根据响应式需求改为col-md-4 col-sm-6，适配小屏幕显示
3. 统一所有carousel-item的结构，避免布局混乱

修改后的完整代码如下：

<div id="carouselExample" class="carousel slide">
  <div class="carousel-inner">
    <!-- 第一张幻灯片：3张卡片 -->
    <div class="carousel-item active">
      <div class="row g-4">
        <div class="col-4">
          <div class="media-container">
            <div class="course">
              <div class="media-preview"></div>
              <div class="media-info">
                <h6 class="tanggalMedia1">20 MARET 2023</h6>
                <h5 class="descBerita1">Lorem ipsum dolor sit <br> amet consectetu</h5>
                <div class="btnRead">
                  <a href="#">&#8594;</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-4">
          <div class="media-container">
            <div class="course">
              <div class="media-preview"></div>
              <div class="media-info">
                <h6 class="tanggalMedia1">20 MARET 2023</h6>
                <h5 class="descBerita1">Lorem ipsum dolor sit <br> amet consectetu</h5>
                <div class="btnRead">
                  <a href="#">&#8594;</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-4">
          <div class="media-container">
            <div class="course">
              <div class="media-preview"></div>
              <div class="media-info">
                <h6 class="tanggalMedia1">20 MARET 2023</h6>
                <h5 class="descBerita1">Lorem ipsum dolor sit <br> amet consectetu</h5>
                <div class="btnRead">
                  <a href="#">&#8594;</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 第二张幻灯片：3张卡片 -->
    <div class="carousel-item">
      <div class="row g-4">
        <div class="col-4">
          <div class="media-container">
            <div class="course">
              <div class="media-preview"></div>
              <div class="media-info">
                <h6 class="tanggalMedia1">20 MARET 2023</h6>
                <h5 class="descBerita1">Lorem ipsum dolor sit <br> amet consectetu</h5>
                <div class="btnRead">
                  <a href="#">&#8594;</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-4">
          <div class="media-container">
            <div class="course">
              <div class="media-preview"></div>
              <div class="media-info">
                <h6 class="tanggalMedia1">20 MARET 2023</h6>
                <h5 class="descBerita1">Lorem ipsum dolor sit <br> amet consectetu</h5>
                <div class="btnRead">
                  <a href="#">&#8594;</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-4">
          <div class="media-container">
            <div class="course">
              <div class="media-preview"></div>
              <div class="media-info">
                <h6 class="tanggalMedia1">20 MARET 2023</h6>
                <h5 class="descBerita1">Lorem ipsum dolor sit <br> amet consectetu</h5>
                <div class="btnRead">
                  <a href="#">&#8594;</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

二、Bootstrap 4与Bootstrap 5能否混用？ #

绝对不建议混用，两者存在大量冲突点：

• 命名空间变更：Bootstrap 5将JS相关属性从data-*改为data-bs-*，混用会导致交互失效
• CSS类与变量调整：部分组件类名、间距变量、断点参数修改，会引发样式错乱
• JS架构重构：Bootstrap 5基于ES6重构JS模块，与Bootstrap 4的jQuery依赖架构不兼容

若有旧Bootstrap 4代码，建议直接迁移到Bootstrap 5；若需使用特定Bootstrap 4组件，可通过自定义隔离样式或独立组件库替代，不要直接引入两个版本的Bootstrap文件。

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