在 Bootstrap 4 中使用 .align-items-*-center 类在不同屏幕上将单行项目居中对齐      .让我们看看如何在小、中、大屏幕尺寸上将 flex 项目在单行中居中对齐 -在小屏幕尺寸上居中对齐   项目 1   项目 2   项目 3   项目 4 在中屏幕尺寸上居中对齐   项目 1   项目 2   项目 3   项目 4 在大屏幕尺寸上居中对齐   项目 1   项目 2   项目 3   ... 阅读更多

在 Bootstrap 4 中使用 align-baseline 类将元素与父元素的基线对齐。设置 align-baselinec 类，如下面的代码片段所示 -现在在其中添加内容 -     演示基线您可以尝试运行以下代码以将元素与父元素的基线对齐 -示例实时演示       Bootstrap 示例                                   示例       这是演示文本       演示基线      

要设置元素具有圆角，请在 Bootstrap 4 中使用 rounded-bottom 类。设置 rounded-bottom 类 -在上面，我还设置了另一个类来设置元素的样式 -.demo {   width: 100px;   height: 120px;   margin: 10px;   background-color: orange; }您可以尝试运行以下代码以实现 rounded-bottom 类 -示例实时演示       Bootstrap 示例                             .demo {       width: 100px;       height: 120px;       margin: 10px;       background-color: orange;     }                   矩形       我们有两个带有圆角（底部）的矩形：                  

在 Bootstrap 4 中使用 flex-wrap 类来换行 flex 项目。以下是换行 flex 项目的代码片段 -   .   .  

要为 Bootstrap 卡片设置容器并将其设置为组，请使用 card-group 类。使用它并像下面这样创建包含两个 Bootstrap 卡的网格 -             演示文本！                          警告！           以下是创建 Bootstrap 中网格（卡片组）的示例 -示例实时演示       Bootstrap 示例                             消息组                             演示文本！                                       警告！                                        做得好！                                       已选中！                        

在 Bootstrap 中使用 .modal(“toggle”) 方法切换模态框。如下所示，模态框在点击按钮时生成 -$(document).ready(function(){   $("#button1").click(function(){     $("#newModal").modal("toggle");   }); });以下是上面使用的按钮 -   模态框一您可以尝试运行以下代码以实现 modal(“toggle”) 方法 -示例实时演示       Bootstrap 示例                             样例     模态框一                                       ×             样例模态框                                 点击外部关闭它。                                 关闭                                   $(document).ready(function(){     $("#button1").click(function(){       $("#newModal").modal("toggle");     });   });  

使用 card-group 类在 Bootstrap 4 中创建一组卡片 -                         让我们在 Bootstrap 中创建一个像网格一样的卡片组 -示例实时演示       Bootstrap 示例                             消息组                             阿根廷大获全胜！                                       演示文本！                                       不要越过！                                       我做到了！                                       它起作用了！                    

在 Bootstrap 中使用 d-flex 类创建 flexbox 容器。这里，我设置了两个 flex 项目 -     一   二您可以尝试运行以下代码以实现 .d-flex 类 -示例实时演示       Bootstrap 示例                             理解 Flex             一       二      

在 Bootstrap 中使用 .btn-outline-dark 类在按钮上设置深色轮廓。以下是带有深色轮廓的按钮示例 -使用 btn-outline-dark 类将上述轮廓设置为按钮，如下所示 -   提交您可以尝试运行以下代码以实现 btn-outline-dark 类 -示例实时演示       Bootstrap 示例                               Bootstrap 4     学习  btn-outline-dark 类用法：     提交  

在 Bootstrap 中使用 border-0 类消除元素的所有边框，如下所示 -   无边框我们还在上面设置了 CSS 样式 -.mystyle {   width: 120px;   height: 100px;   margin: 10px;   background: gray; }您可以尝试运行以下代码以实现 border-0 类 -示例实时演示       Bootstrap 示例                               .mystyle {       width: 120px;       height: 100px;       margin: 10px;       background: gray;     }             两个矩形     橙色边框     无边框