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

要在不同屏幕尺寸上对齐 flex 项目，请使用 justify-content-*-around 类。 你可以实现以下结果，该结果在小型和中型屏幕尺寸上对齐内容 - 要在 Bootstrap 中实现 justify-content-*-around 类 - 例子在线演示       Bootstrap 例子                             默认           答案 1       答案 2       答案 3         小型屏幕           答案 1       答案 2       答案 3         中型屏幕           答案 1       答案 2       答案 3         大型屏幕           答案 1       答案 2       答案 3      

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

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

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

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

在 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      

要在 Bootstrap 中为卡片设置积极操作，请将 bg-success 类与 card 类一起使用。设置积极操作并使用“card bg-success” - 现在使用 card-body 类添加卡片正文 -   印度以 7 विकेट 获胜 你可以尝试运行以下代码来实现 card-success 类 - 例子在线演示         Bootstrap 例子                             结果     印度和澳大利亚之间前两场比赛的结果：           印度以 10 分获胜               印度以 7 विकेट 获胜      

要在 Bootstrap 4 中样式化卡片标题内的导航药丸，请使用 card-header-pills 类，如下所示 & minus;在 Bootstrap 中的 header 类内设置导航药丸 -             服装                 电子产品               手机配件       你可以尝试运行以下代码，在 Bootstrap 4 中实现 card-header-pills 类 - 例子在线演示       Bootstrap 例子                             产品                                             服装                                       电子产品                                       手机配件                                         服装         我们有男士和女士服装系列...              

使用 flex-*-wrap 类（如 flex-lg-wrap、flex-sm-wrap、flex-md-wrap 等）在不同屏幕尺寸上换行 flex 项目 - 以下是使用 flex-sm-wrap 类在小型屏幕上换行 flex 项目的代码片段 -   波兰   荷兰   爱尔兰   巴西 你可以尝试运行以下代码来在 Bootstrap 4 中实现 flex-*-wrap 类 - 例子在线演示       Bootstrap 例子                             Flex 示例     换行 - 是   ... 阅读更多