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

Question

尝试显示对移动设备、台式机、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>

标签： cssresponsive-designbootstrap-5

Answer 1

Boostrap 的文档有这方面的例子。

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

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

请参阅文档的网格选项部分，了解有关屏幕尺寸、、、等内容lg的md详细xs信息

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>