如何使用 bootstrap 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>

Answer 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>

如何使用 bootstrap 5 显示具有响应式设计的卡片

How to show cards with responsive design using bootstrap 5

css

responsive-design

bootstrap-5