如何使用引导程序 5 显示具有响应式设计的卡片答案

【问题标题】：How to show cards with responsive design using bootstrap 5如何使用引导程序 5 显示具有响应式设计的卡片
【发布时间】：2021-10-04 00:19:48
【问题描述】：

尝试显示针对移动设备、台式机、iPad 的响应式卡片。我要展示

对于移动一栏。

适用于 iPad 两栏。

适用于桌面四栏。

但下面的代码仅适用于移动设备和台式机，不适用于 iPad。在我的 iPad 4 列中显示。但我想在我的 iPad 2 列中显示。那么，如何为 iPad 编写 CSS？如果有人知道，请帮助找到解决方案。

CSS：

<div class="col-md-12"> 
<div class="row grid">

<div class="col-lg-3 col-md-4"> Card 1 </div>
<div class="col-lg-3 col-md-4"> Card 2 </div>
<div class="col-lg-3 col-md-4"> Card 3 </div>
<div class="col-lg-3 col-md-4"> Card 4 </div>
<div class="col-lg-3 col-md-4"> Card 5 </div>
<div class="col-lg-3 col-md-4"> Card 6 </div>
<div class="col-lg-3 col-md-4"> Card 7 </div>
<div class="col-lg-3 col-md-4"> Card 8 </div>
<div class="col-lg-3 col-md-4"> Card 9 </div>
<div class="col-lg-3 col-md-4"> Card 10 </div>
<div class="col-lg-3 col-md-4"> Card 11 </div>
<div class="col-lg-3 col-md-4"> Card 12 </div>
<div class="col-lg-3 col-md-4"> Card 13 </div>
<div class="col-lg-3 col-md-4"> Card 14 </div>
 
</div> 
</div>

【问题讨论】：

标签： css responsive-design bootstrap-5

【解决方案1】：

Boostrap's documentation has examples of this.

由于 bootstrap 使用 12 列网格系统，请使用以下内容：

col-lg-3 - 四列，12 / 4 == 3
col-md-6 - 两列，12 / 2 == 6
col-xs-12 - 一列，12 / 12 == 1

有关屏幕尺寸lg、md、xs 以及更多封面的详细信息，请参阅文档的grid-options 部分

div {
  border: 1px dashed lightblue;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="col-md-12">
  <div class="row grid">
    <div class="col-xs-12 col-md-6 col-lg-3">Card 1</div>
    <div class="col-xs-12 col-md-6 col-lg-3">Card 2</div>
    <div class="col-xs-12 col-md-6 col-lg-3">Card 3</div>
    <div class="col-xs-12 col-md-6 col-lg-3">Card 4</div>
    <div class="col-xs-12 col-md-6 col-lg-3">Card 5</div>
    <div class="col-xs-12 col-md-6 col-lg-3">Card 6</div>
    <div class="col-xs-12 col-md-6 col-lg-3">Card 7</div>
    <div class="col-xs-12 col-md-6 col-lg-3">Card 8</div>
  </div>
</div>

【讨论】：