在 Bootstrap 4 中使用 .align-items-*-center 类在不同屏幕上将单行项目居中对齐      .让我们看看如何在小、中、大屏幕尺寸上将单行上的弹性项目居中对齐 -在小屏幕上居中对齐   项目 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 示例                                   示例       矩形       我们有两个带有圆角（底部）的矩形：                  

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

要为 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 类创建一个弹性容器。这里，我设置了两个弹性项目 -     一   二 您可以尝试运行以下代码以实现 .d-flex 类 -示例在线演示       Bootstrap 示例                               理解弹性盒             一       二      

在 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;     }             两个矩形     橙色边框     无边框