要为元素（例如 ）添加左侧圆角，请在 Bootstarp 4 中使用 rounded-left 类。设置左侧圆角 -您可以尝试运行以下代码以实现 rounded-left 类 -示例实时演示 Bootstrap 示例 Rounded Corner 我们有三个带有左侧圆角的矩形：

使用 .justify-content-*-end 类在不同屏幕尺寸上将弹性项目对齐到末尾，如下所示 -对于小屏幕尺寸，使用 -justify-content-sm-end对于中等屏幕尺寸，使用 -justify-content-md-end对于大屏幕尺寸，使用 -justify-content-lg-end让我们看看如何在小、中和大屏幕尺寸上水平对齐弹性项目 -示例实时演示 Bootstrap 示例 Form of Tea Black Tea Green Tea Indian Tea Black Tea Green Tea Indian Tea Black Tea Green Tea Indian Tea

在 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 示例 Vehicle Car Bike Truck Car Bike Truck Car Bike Truck Car Bike Truck

在 Bootstrap 4 中，将 bg-info 类与 card-class 一起使用，可在卡片中添加信息 -现在在其内包含 card-body 类 - Bring your Laptop for the BootCamp 让我们看看一个示例，学习如何在 Bootstrap 4 中使用 card 类实现 bg-info 类 -示例实时演示 Bootstrap 示例 Information - Event Bring your Laptop for the BootCamp

要将弹性项目对齐到不同屏幕尺寸的周围，请使用 justify-content-*-around 类。您可以获得以下结果，该结果在小屏幕和中屏幕尺寸上对齐内容 -在 Bootstrap 中实现 justify-content-*-around 类 -示例实时演示 Bootstrap 示例 Default ANS 1 ANS 2 ANS 3 Small Screen Size ANS 1 ANS 2 ANS 3 Medium Screen Size ANS 1 ANS 2 ANS 3 Large Screen Size ANS 1 ANS 2 ANS 3

在 Bootstrap 中使用 justify-content-*-around 类在不同屏幕尺寸上将弹性项目对齐到周围 -justify-content-sm-around：在小屏幕尺寸上对齐内容 justify-content-md-around：在中等屏幕尺寸上对齐内容 justify-content-lg-around：在大屏幕尺寸上对齐内容例如，让我们看看如何为中等屏幕设备对齐弹性项目（justify-content-md-around） - RANK 1 RANK 2 RANK 3 您可以尝试运行以下代码以实现 justify-content-* -示例实时演示 Bootstrap 示例 RANK 1 RANK 2 RANK 3 RANK 1 RANK 2 RANK 3 RANK 1 RANK 2 RANK 3 RANK 1 RANK 2 RANK 3

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

使用 Bootstrap 4 中的 card-columns 类创建卡片网格 - 在 card-columns 类中设置卡片类 - One 让我们看看一个说明 card-columns 类用法的示例 -示例实时演示 Bootstrap 示例 Demo One Two Three

在 Bootstrap 中使用 card-body 类为卡片的内容设置容器 - Body of card1 现在将其添加到 Bootstrap 卡片类中 - Body of card1 Body of card2 您可以尝试运行以下代码，为 Bootstrap 4 卡片内容设置容器 -示例实时演示 Bootstrap 示例 Heading Three Body of card1 Body of card2

在 Bootstrap 中使用 .justify-content-* 类从开始、结束、中心、之间等位置对齐弹性项目。对于 justify-content-start，对齐的弹性项目将如下所示 -对于 justify-content-end，对齐的弹性项目将如下所示 -对于 justify-content-around，对齐的弹性项目将如下所示 -让我们看看如何对齐内容 -示例实时演示 Bootstrap 示例 Rank 1 RANK 2 RANK3 RANK 1 RANK 2 RANK 3 RANK 1 RANK 2 RANK 3