bootstrap row-cols-sm-1不适用于卡。两张卡片出现在手机屏幕上，而它应该是1

基础概念

Bootstrap 是一个流行的前端框架，用于快速开发响应式和移动优先的网站。它使用栅格系统来布局页面内容。栅格系统基于行（row）和列（col）的组合，通过预定义的类来控制不同屏幕尺寸下的列宽。

row-cols-sm-1 是 Bootstrap 5 中的一个类，用于在小屏幕（sm）及以上设备上将每行设置为只有一列。

类型

Bootstrap 的栅格系统有以下几种主要的类：

row：定义行。
col：定义列。
col-*：定义列在不同屏幕尺寸下的宽度，例如 col-sm-1 表示在小屏幕及以上设备上每行只有一列。

应用场景

栅格系统广泛应用于需要响应式布局的网站，如博客、电商网站、企业官网等。

问题分析

如果你发现 row-cols-sm-1 不适用于卡片（card），导致两张卡片出现在手机屏幕上，而你期望的是每行只显示一张卡片，可能是以下原因：

卡片容器未正确使用：确保卡片容器使用了 Bootstrap 的栅格系统类。
CSS 冲突：可能存在其他 CSS 样式影响了 Bootstrap 的默认行为。
Bootstrap 版本问题：确保你使用的是 Bootstrap 5，因为 row-cols-* 类是在 Bootstrap 5 中引入的。

解决方法

以下是一个示例代码，展示如何正确使用 row-cols-sm-1 类：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Grid Example</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <div class="row row-cols-sm-1">
      <div class="col mb-4">
        <div class="card">
          <img src="https://via.placeholder.com/300" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
      </div>
      <div class="col mb-4">
        <div class="card">
          <img src="https://via.placeholder.com/300" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>