使用 .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 示例                         示例   这是演示文本   演示基线   顶部对齐   顶部文本   底部文本