Bootstrap 4更改每行的卡片数量

Bootstrap 4是一种流行的前端开发框架，它提供了一套用于构建响应式和移动优先的网站和应用程序的工具和组件。在Bootstrap 4中，可以通过使用栅格系统来更改每行的卡片数量。

栅格系统是Bootstrap的核心组件之一，它将页面水平划分为12个等宽的列。通过将卡片放置在这些列中，可以轻松地控制每行的卡片数量。

要更改每行的卡片数量，可以使用不同的列类来定义卡片的宽度。以下是一些常用的列类：

• col-：在所有屏幕大小上都占据等宽的一列。
• col-sm-：在小屏幕（手机）上占据等宽的一列。
• col-md-：在中等屏幕（平板电脑）上占据等宽的一列。
• col-lg-：在大屏幕（桌面电脑）上占据等宽的一列。
• col-xl-：在超大屏幕上占据等宽的一列。

通过在卡片的外部包裹一个div元素，并为该元素添加适当的列类，可以控制每行的卡片数量。例如，如果想要每行显示3个卡片，可以使用以下代码：

<div class="row">
  <div class="col-md-4">
    <!-- 第一个卡片内容 -->
  </div>
  <div class="col-md-4">
    <!-- 第二个卡片内容 -->
  </div>
  <div class="col-md-4">
    <!-- 第三个卡片内容 -->
  </div>
</div>

在上面的示例中，使用col-md-4类将每个卡片的宽度设置为占据一行的1/3。这样，无论屏幕大小如何，每行都会显示3个卡片。

Bootstrap 4还提供了其他一些有用的类和组件，可以进一步定制和美化卡片。例如，可以使用card类来创建卡片容器，并使用card-header、card-body、card-footer等类来定义卡片的不同部分。

腾讯云提供了一系列与云计算相关的产品和服务，其中包括云服务器、云数据库、云存储等。您可以访问腾讯云的官方网站（https://cloud.tencent.com/）了解更多信息，并查找适合您需求的产品和服务。