如何在bootstrap 4的小屏幕中使卡体水平

Posted 2023-03-06

【中文标题】如何在bootstrap 4的小屏幕中使卡体水平

【英文标题】：How to make card body horizontal in small screens in bootstrap 4

【发布时间】：2019-09-20 03:21:17

【问题描述】：

我想了解如何使用 bootstrap 4 在小（移动）屏幕中使卡片水平显示。

如下图所示，桌面/大屏幕中的卡片垂直，移动/小屏幕中的卡片水平。

 <div class="card-deck py-4">
      <div class="card">
          <img src="../images/providers/tw-s01.svg" style="width:100%" class="card-imm-3"/>
              <div class="card-body">
                  <div class="card-title card-headtext">step 1</div>
                  <div class="card-text cardtext">Register for a free 
                  account</div>
              </div>
            </div>
 </div>

【参考方案1】：

您可以使用 .col-sm（适用于小屏幕）、.col-lg（适用于大屏幕）等引导类，将这些类结合起来调整每个设备的 div 在这里阅读更多 https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp