使用 .align-content-*-center 类在 Bootstrap 4 中不同屏幕上居中对齐收集的项目。以下是您如何在不同屏幕上居中对齐收集的项目的方法：小型屏幕 中型屏幕 大型屏幕您可以尝试运行以下代码，以便在 Bootstrap 4 中不同屏幕上居中对齐收集的项目：示例在线演示 Bootstrap 示例 示例 一 二 三 四 五 六 ... 阅读更多

设置卡片容器，使用 card-deck 类。将其放在以下 div 内，使其具有相同的宽度和高度： 您可以尝试运行以下代码来实现 card-deck 类：示例在线演示 Bootstrap 示例 演示信息 注意：调整浏览器大小以查看效果。 没什么新鲜的！ 警告！编译时错误！ 再检查一下！ 我们赢了！

要为带有红色背景的卡片设置负面操作（危险），需要使用 Bootstrap 上下文类 card-danger。设置危险操作： 危险！高压！您可以尝试运行以下代码，以便在 Bootstrap 4 中为卡片设置危险操作：示例在线演示 Bootstrap 示例 消息 你好吗？ 危险！高压！

在 Bootstrap 中显示元素的绿色边框，表示使用 border-success 类成功。将边框设置为绿色： 我还在 div 中添加了“mystyle”类，用于设置我的 div 的样式，在我的示例中是一个矩形： .mystyle { width: 250px; height: 150px; margin: 10px; }实现 border-success 如下所示：示例在线演示 Bootstrap 示例 .mystyle { width: 250px; height: 150px; margin: 10px; } 形状 绿色边框

使用 Bootstrap 4 中的 border-secondary 类为元素设置灰色边框。添加它就像下面的示例一样：我还包含了“mystyle”类来设置 div 的样式： .mystyle { width: 250px; height: 150px; margin: 10px; }让我们来看一个实现 border-secondary 类的示例：示例在线演示 Bootstrap 示例 .mystyle { width: 250px; height: 150px; margin: 10px; } 形状 带灰色边框的矩形

使用 flex-*-column-reverse 类以垂直反转的方式在不同屏幕尺寸上显示弹性项目。以下是在中等设备上使用“flex-md-column-reverse”类反转弹性项目的示例： 一 二 三 同样，使用“flex-lg-column-reverse”类为大型设备设置： 一 二 三 实现 .flex-*-column-reverse 类：示例在线演示 Bootstrap 示例 示例 更改浏览器大小以查看效果： 默认 一 二 三 不同屏幕尺寸上的弹性布局（中等-反转） 一 二 三 不同屏幕尺寸上的弹性布局（大型-反转） 一 二 三

要在不同屏幕上从起始位置对齐收集的项目，请使用 .align-content-*-start 类。如下所示在不同屏幕尺寸上对齐项目：中型屏幕 工作 1 工作 2 工作 3 工作 4 工作 5 大型屏幕 工作 1 工作 2 工作 3 工作 4 工作 5 您可以尝试运行以下代码，以便在 Bootstrap 4 中为不同屏幕尺寸实现 align-content-*start 类：示例在线演示 Bootstrap 示例 ... 阅读更多

flex-column-reverse 用于以垂直方向反转显示弹性项目。添加 flex-column-reverse 类，如下面的代码片段所示：然后，在其中添加弹性项目： 演示 1 演示 2 演示 3 您可以尝试运行以下代码，以垂直反转显示弹性项目：示例在线演示 Bootstrap 示例 实现列反转 演示 1 演示 2 演示 3

要为 Bootstrap 卡片着色，我们使用上下文类。对于危险操作，请将 bg-danger 上下文类与 card 类一起使用： 危险！高压！您可以尝试运行以下代码来实现 card-danger 类：示例在线演示 Bootstrap 示例 消息 你好吗？ 危险！高压！

使用 align-text-top 类将元素与父元素字体的顶部对齐。设置 align-text-top 类如下： 顶部文本 您可以尝试运行以下代码，以便在 Bootstrap 4 中实现 align-text 类：示例在线演示 Bootstrap 示例 示例 这是演示文本 基线演示 顶部对齐 顶部文本 底部文本