如何避免Bootstrap 5轮播卡片换行并实现垂直对齐？

AI 小北

2026-7-15

解决Bootstrap 5轮播卡片垂直对齐不换行问题

问题说明

使用Bootstrap 5搭建网站并创建轮播组件时，需要实现轮播内所有卡片垂直对齐且横向排列不换行，但当前效果中卡片会换行且高度不一致。

当前效果：

期望效果：

问题根源

原代码使用row和col-lg-4布局，当卡片数量超过3个时，因栅格列总和超出12会自动换行；
卡片内容高度不一致，导致垂直方向无法对齐；
重复引入不同版本的Bootstrap CSS，可能引发样式冲突。

解决方案

1. 清理重复的Bootstrap依赖

删除<head>中重复引入的Bootstrap 5.2.3 CSS链接，只保留最新的5.3.0版本：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

2. 调整轮播项布局实现不换行

将每个carousel-item内的row替换为d-flex flex-nowrap，让卡片横向排列不换行；给每个卡片容器添加flex-shrink-0 w-33（自定义宽度类），保证每个卡片占1/3宽度；同时给卡片添加h-100类强制高度统一，实现垂直对齐。

3. 添加自定义宽度CSS

在样式中添加自定义宽度类：

.w-33 {
  width: 33.333%;
}

修改后的完整代码片段

CSS代码

.crd {
  background: hsl(233, 47%, 96%);
  transition: all;
}

.crd:hover {
  background: hsl(216, 90%, 44%);
  color: #fff;
  transition: 0.5s;
}

.card img {
  margin: auto;
}

body {
  background: hsl(233, 47%, 96%);
  font-family: 'Poppins', sans-serif;
}

.w-33 {
  width: 33.333%;
}

HTML代码

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="..." />

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="stylesheet" href="../css/index.css" />
  <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.4.0/css/all.css">
  <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-solid.css">
  <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-regular.css">
  <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-light.css">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>
  <!-- OUR CLIENTS SECTION START -->
  <section class="bg-dark text-center">
    <div class="container">
      <div class="row text-white py-5">
        <h2 class="display-6"></h2>
        <div class="col-12">
          <a class="btn btn-primary" href="#carouseldemo1" role="button" data-bs-slide="prev">
            <i class="fa fa-arrow-left"></i>
          </a>
          <a class="btn btn-primary" href="#carouseldemo1" role="button" data-bs-slide="next">
            <i class="fa fa-arrow-right"></i>
          </a>
        </div>
        <div class="col-12">
          <div class="carousel slide" data-bs-ride="carousel" id="carouseldemo1">
            <div class="carousel-inner">
              <div class="carousel-item active">
                <div class="d-flex flex-nowrap">
                  <div class="flex-shrink-0 w-33 p-2">
                    <div class="card text-center p-4 h-100">
                      <i class="fa-solid fa-camera-cctv fa-3x"></i>
                      <div class="card-body">
                        <h4>CCTV Services</h4>
                        <p class="p-2">
                          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatum, voluptate, quibusdam, quia voluptas quod quos exercitationem quae voluptatibus doloribus quidem. Quisquam
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="flex-shrink-0 w-33 p-2">
                    <div class="card text-center p-4 h-100">
                      <i class="fa-solid fa-camera-cctv fa-3x"></i>
                      <div class="card-body">
                        <h4>CCTV Services</h4>
                        <p class="p-2">
                          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatum, voluptate, quibusdam, quia voluptas quod quos exercitationem quae voluptatibus doloribus quidem. Quisquam
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="flex-shrink-0 w-33 p-2">
                    <div class="card text-center p-4 h-100">
                      <i class="fa-solid fa-camera-cctv fa-3x"></i>
                      <div class="card-body">
                        <h4>CCTV Services</h4>
                        <p class="p-2">
                          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatum, voluptate, quibusdam, quia voluptas quod quos exercitationem quae voluptatibus doloribus quidem. Quisquam
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="carousel-item">
                <div class="d-flex flex-nowrap">
                  <div class="flex-shrink-0 w-33 p-2">
                    <div class="card text-center p-4 h-100">
                      <i class="fa-solid fa-camera-cctv fa-3x"></i>
                      <div class="card-body">
                        <h4>CCTV Services</h4>
                        <p class="p-2">
                          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatum, voluptate, quibusdam, quia voluptas quod quos exercitationem quae voluptatibus doloribus quidem. Quisquam
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="flex-shrink-0 w-33 p-2">
                    <div class="card text-center p-4 h-100">
                      <i class="fa-solid fa-camera-cctv fa-3x"></i>
                      <div class="card-body">
                        <h4>CCTV Services</h4>
                        <p class="p-2">
                          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatum, voluptate, quibusdam, quia voluptas quod quos exercitationem quae voluptatibus doloribus quidem. Quisquam
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="flex-shrink-0 w-33 p-2">
                    <div class="card text-center p-4 h-100">
                      <i class="fa-solid fa-camera-cctv fa-3x"></i>
                      <div class="card-body">
                        <h4>CCTV Services</h4>
                        <p class="p-2">
                          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatum, voluptate, quibusdam, quia voluptas quod quos exercitationem quae voluptatibus doloribus quidem. Quisquam
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="flex-shrink-0 w-33 p-2">
                    <div class="card text-center p-4 h-100">
                      <i class="fa-solid fa-camera-cctv fa-3x"></i>
                      <div class="card-body">
                        <h4>CCTV Services</h4>
                        <p class="p-2">
                          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatum, voluptate, quibusdam, quia voluptas quod quos exercitationem quae voluptatibus doloribus quidem. Quisquam
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- OUR CLIENTS SECTION CLOSE -->
</body>

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

如何避免Bootstrap 5轮播卡片换行并实现垂直对齐？

问题说明 #

问题根源 #

解决方案 #

1. 清理重复的Bootstrap依赖 #

2. 调整轮播项布局实现不换行 #

3. 添加自定义宽度CSS #

修改后的完整代码片段 #

CSS代码 #

HTML代码 #