Javascript 如何设置引导卡中的最大项目数？

我使用boostrap卡来显示内容，但当我使用后端来循环时。刚添加的项目和右侧添加的项目。“我想要项目”在列中设置为3项，并直接向下继续

像这样

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

卡片标题
一些基于卡片标题的快速示例文本，构成了卡片内容的大部分
卡片标题
一些基于卡片标题的快速示例文本，构成了卡片内容的大部分
卡片标题
一些基于卡片标题的快速示例文本，构成了卡片内容的大部分

---

但是怎么做呢？我尝试在后端分页，但仍然不起作用：（

将卡div放入容器中。您应该使用引导

col

属性进行布局，即

col-md-12

）

您可能还应该将card div放在row标记中

---

通过内联css设置宽度和设置rem/em值的方式没有多大意义。Bootstrap有一个用于定位的网格系统，您应该使用它。可以找到使用Bootstrap网格的示例。

这里有一个解决方案

卡片标题
一些基于卡片标题的快速示例文本，构成了卡片内容的大部分
卡片标题
一些基于卡片标题的快速示例文本，构成了卡片内容的大部分
卡片标题
一些基于卡片标题的快速示例文本，构成了卡片内容的大部分

检查网格系统 在引导程序4中

如果您希望所有屏幕上的每张卡大小相同，请添加

col-4

如果您希望在大屏幕上显示3张卡，在小屏幕上单独显示，请使用col-lg-4 col-md-12

卡片标题
一些基于卡片标题的快速示例文本，构成了卡片内容的大部分
卡片标题
一些基于卡片标题的快速示例文本，构成了卡片内容的大部分
卡片标题
一些基于卡片标题的快速示例文本，构成了卡片内容的大部分