要为元素（例如 `div`）添加左圆角，请在 Bootstrap 4 中使用 `rounded-left` 类。设置左圆角：您可以尝试运行以下代码来实现 `rounded-left` 类：示例在线演示 Bootstrap 示例

使用 `.justify-content-*-end` 类可在不同屏幕尺寸下将弹性项目对齐到末尾，例如：对于小屏幕，使用 `justify-content-sm-end`；对于中屏幕，使用 `justify-content-md-end`；对于大屏幕，使用 `justify-content-lg-end`。让我们看看如何在小、中、大屏幕尺寸上水平对齐弹性项目：示例在线演示 Bootstrap 示例

在 Bootstrap 4 中使用 `justify-content-*-center` 类可在不同屏幕尺寸下居中内容。对于不同的屏幕尺寸：`justify-content-sm-center`：小屏幕尺寸；`justify-content-md-center`：中屏幕尺寸；`justify-content-lg-center`：大屏幕尺寸；`justify-content-xl-center`：特大屏幕尺寸。让我们看看如何实现 `justify-content-*-center` 类：示例在线演示 Bootstrap 示例

在 Bootstrap 4 中，将 `bg-info` 类与 `card` 类一起使用，可在卡片中添加信息：现在在其中包含 `card-body` 类： 带上你的笔记本电脑参加训练营 让我们来看一个例子，学习如何在 Bootstrap 4 中使用 `bg-info` 类与 `card` 类一起使用：示例在线演示 Bootstrap 示例

要在不同屏幕尺寸下将弹性项目环绕对齐，请使用 `justify-content-*-around` 类。您可以实现以下结果，该结果在小屏幕和中屏幕尺寸上对齐内容：要在 Bootstrap 中实现 `justify-content-*-around` 类：示例在线演示 Bootstrap 示例

在 Bootstrap 中使用 `justify-content-*-around` 类可在不同屏幕尺寸下将弹性项目环绕对齐：`justify-content-sm-around`：在小屏幕尺寸上对齐内容；`justify-content-md-around`：在中屏幕尺寸上对齐内容；`justify-content-lg-around`：在大屏幕尺寸上对齐内容。例如，让我们看看如何为中等屏幕设备对齐弹性项目 (`justify-content-md-around`)： 排名1 排名2 排名3 您可以尝试运行以下代码来实现 `justify-content-*`：示例在线演示 Bootstrap 示例

使用 Bootstrap 4 中的 `flex-column-reverse` 类反转弹性项目的顺序。设置 `flex-column-reverse` 类，如下所示：添加要包含在 Bootstrap 4 中的弹性项目： 演示1 演示2 演示3 以下是如何实现 `flex-column-reverse` 类的示例：示例在线演示 Bootstrap 示例

使用 Bootstrap 4 中的 `card-columns` 类创建卡片网格：在 `card-columns` 类中设置卡片类： 一 让我们来看一个例子，说明 `card-columns` 类的用法：示例在线演示 Bootstrap 示例

在 Bootstrap 中使用 `card-body` 类来设置卡片内容的容器： 卡片1正文 现在将其添加到 Bootstrap 卡片类中： 卡片1正文 您可以尝试运行以下代码来设置 Bootstrap 4 卡片内容的容器：示例在线演示 Bootstrap 示例

使用 Bootstrap 中的 `.justify-content-*` 类来对齐 flex 项目，例如从起始位置、结束位置、居中、分布等等。对于 `justify-content-start`，对齐后的 flex 项目将排列如下：- 对于 `justify-content-end`，对齐后的 flex 项目将排列如下：- 对于 `justify-content-around`，对齐后的 flex 项目将排列如下：-让我们看看如何对齐内容 -示例演示   Bootstrap 示例                       排名 1       排名 2       排名 3               排名 1       排名 2       排名 3               排名 1       排名 2       排名 3