使用 flex-column 类垂直显示弹性项目 - 您现在需要将弹性项目添加到 flex-column 类中 - 第一个 第二个 让我们来看一个示例，了解如何在 Bootstrap 4 中实现 flex-column 类 -示例在线演示 Bootstrap 示例 弹性列 第一个 第二个 第三个 第四个 第五个

使用 Bootstrap 中的 .d-*-flex 类在特定屏幕尺寸上创建弹性盒容器。对于不同的屏幕尺寸，使用“d-sm-flex”、“d-md-flex”等，如下所示 - 小屏幕 中屏幕 大屏幕 超大屏幕 上面，弹性项目针对小、中、大、超大屏幕尺寸设置。让我们来看一个该类的示例及其实现 -示例在线演示 Bootstrap 示例 弹性示例 d-flex d-sm-flex d-md-flex d-lg-flex d-xl-flex

要在 Bootstrap 4 中将弹性项目与基线对齐，请使用 .align-self-baseline 类。将弹性项目设置为基线，如下所示 - A-one B-one C-one D-one 您可以尝试运行以下代码，在 Bootstrap 4 中实现 align-self-baseline 类 -示例在线演示 Bootstrap 示例 将特定弹性项目与基线对齐 A-one B-one C-one D-one

要在 Bootstrap 卡片中的任何标题元素中添加标题，请使用 card-title 类 - 顶尖大学 card-title 类位于 Bootstrap 中的 card 类内部 - 顶尖大学 斯坦福 牛津 示例在线演示 Bootstrap 示例 顶尖大学 斯坦福 牛津

要在 Bootstrap 中为卡片添加浅灰色背景颜色，请将 bg-light 上下文类与 card 类一起使用。要设置浅灰色背景，请将其添加到类中 - 减小图像尺寸 您可以尝试运行以下代码，在 Bootstrap 4 中为卡片添加浅灰色背景颜色 -示例在线演示 Bootstrap 示例 优化 减小图像尺寸 清除缓存 使用 CDN

在 Bootstrap 中使用 .align-items-center 类将项目的单行与中心对齐。要与中心对齐 -现在添加弹性项目 - 项目 1 项目 2 项目 3 项目 4 您可以尝试运行以下代码，在 Bootstrap 4 中实现 align-items-center 类 -示例在线演示 Bootstrap 示例 将单行上的弹性项目与中心对齐 项目 1 项目 2 项目 3 项目 4

在 Bootstrap 4 中使用 align-bottom 类将元素与行上的最低元素对齐。将类设置为 -现在添加内容 - 底部对齐 您可以尝试运行以下代码，在 Bootstrap 4 中将元素与行上的最低元素对齐 -示例在线演示 Bootstrap 示例 示例 这是演示文本 演示基线 顶部对齐 中间对齐 底部对齐

要在 Bootstrap 4 中在不同屏幕上将项目的单行与末尾对齐，请使用 .align-items-*-end 类。在不同的屏幕尺寸上对齐 -中屏幕尺寸 产品 1 产品 2 产品 3 产品 4 大屏幕尺寸 产品 1 产品 2 产品 3 产品 4 您可以尝试运行以下代码，在特定屏幕尺寸上将项目的单行与末尾对齐 -示例在线演示 Bootstrap 示例 将单行上的弹性项目与末尾对齐 产品 1 产品 2 产品 3 产品 4 小屏幕尺寸 产品 1 产品 2 产品 3 产品 4 中屏幕尺寸 产品 1 产品 2 产品 3 产品 4 大屏幕尺寸 产品 1 产品 2 产品 3 产品 4

要拉伸收集的项目，请在 Bootstrap 4 中使用 .align-content-stretch 类。 使用 align-content-stretch 类，如下所示 -

在 Bootstrap 中使用 .d-*-flex 类在屏幕尺寸上设置弹性盒容器，如下所示 -d-flex d-sm-flex d-md-flex d-lg-flex 上面的弹性针对不同的屏幕尺寸设置，例如，d-sm-flex = 小屏幕尺寸的弹性d-md-flex = 中屏幕尺寸的弹性d-lg-flex = 大屏幕尺寸的弹性d-xl-flex = 超大屏幕尺寸的弹性 让我们来看一个该类的示例 -示例在线演示 Bootstrap 示例 理解弹性 d-flex 小屏幕尺寸 中屏幕尺寸 大屏幕尺寸 超大屏幕尺寸