css Bootstrap 4：对齐每一个装满卡片的新行中的5张卡片

6yoyoihd 于 2023-01-03 发布在 Bootstrap

关注(0)|答案(1)|浏览(178)

下面是我的“引导配置”：

<div class="container">
  <div class="row">
    <div class="col-12 col-lg-3">              
      <div class="card mb-3 cardtrans">
// Here goes card-body / header and all the other stuff inside it. 
      </div>
    </div>
  </div>
</div>

我使用PHP循环显示每张新卡片。
我用上面的代码在同一行中对齐4张卡片。我想在每一个新行中看到5张卡片。我应该使用什么类？或者我需要额外的CSS代码吗？

css

来源：https://stackoverflow.com/questions/74976009/bootstrap-4-align-5-cards-in-each-new-lin-filled-with-cards

1条答案

按热度按时间

ws51t4hk1#

用于 Bootstrap 4.6.x

使用Row Columns中的row-cols-lg-5，您不需要设置每个元素的列宽，而只需设置行的列数，bootstrap会将溢出内容打包到下一行。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row row-cols-lg-5">
    <div class="col-12">
      <div class="card mb-3 cardtrans">Card 1</div>
    </div>
    <div class="col-12">
      <div class="card mb-3 cardtrans">Card 2</div>
    </div>
    <div class="col-12">
      <div class="card mb-3 cardtrans">Card 3</div>
    </div>
    <div class="col-12">
      <div class="card mb-3 cardtrans">Card 4</div>
    </div>
    <div class="col-12">
      <div class="card mb-3 cardtrans">Card 5</div>
    </div>
    <div class="col-12">
      <div class="card mb-3 cardtrans">Card 6</div>
    </div>
  </div>
</div>

赞(0）回复(0）举报 2023-01-03

我来回答

css Bootstrap 4：对齐每一个装满卡片的新行中的5张卡片

1条答案

相关问题

热门标签

最新问答