html - 在保持响应能力的同时动态更改 Bootstrap 中的列排列

Question

我的页面上有一个区域，我生成一定大小的卡片 (250*250)。但我希望它每行最多 4 张卡片(在小视口(viewport)上我会堆叠它们)。目前，它适用于 4 张或更多卡片(多余的部分会断开并转到另一条线上，一切都很好)。但问题是当我的卡少于 4 张时(可能会发生)。这些卡片来 self 在运行时生成的数据库。顺便说一下，这是一个 Rails 应用程序。

如果卡片少于 4 张，我希望卡片能够自行对齐，同时通过增加卡片的左右边距来保持它们在行内的大小。

我想到的设计是针对 4 张或更多卡片:

对于少于 4 张的情况，例如 2 张这样的卡片:

这就是当我有 2 张卡片时会发生的情况:

这是我拥有的 5 张卡片:

margin ，我可以使用。

---

问题:我怎样才能解决这个问题，以便在大屏幕上只有 4 个固定大小的列，而在小屏幕上将它们堆叠起来。如果行中的卡片少于 4 张，则动态对齐。

这是我到目前为止所做的:

HTML

<div class="feature-wrapper pt-5 pb-5 mt-5 mt-lg-0 h-100 ">

<div class="d-flex align-items-center h-100 justify-content-center ">

    <div class="row">

        <div class="my-card col-sm-12 col-lg-3 text-center mb-3 mb-md-0 rounded border">
            <i class="far fa-plus-square fa-10x"></i>
        </div>

        <div class="my-card col-sm-12 col-lg-3 text-center mb-3 mb-md-0 rounded border">
            <i class="fas fa-arrow-alt-circle-down fa-10x"></i>
        </div>
         <div class="my-card col-sm-12 col-lg-3 text-center mb-3 mb-md-0 rounded border">
            <i class="fas fa-arrow-alt-circle-down fa-10x"></i>
        </div>
         <div class="my-card col-sm-12 col-lg-3 text-center mb-3 mb-md-0 rounded border">
            <i class="fas fa-arrow-alt-circle-down fa-10x"></i>
        </div>
    </div>
</div>

CSS

body,html{
  height:100%;
}
.my-card{
      height:250px;
      width:250px;
      background-color:red;
      text-align:center;
}

Answer 1

使用 Bootstrap 网格很难获得这种精确布局，因为卡的尺寸是固定的。如果您添加一点 CSS，您可以使 flexbox 行的大小完全根据卡片宽度...

https://www.codeply.com/go/AbMj2VVo1H

.flex-shrink {
  flex:0 0 1000px;
}

@media (max-width:768px) {
  .flex-shrink {
    flex:0 0 500px;
  }
}

如果卡片大小不正好是 250 像素，您可以允许更大的灵 active ，那么 Bootstrap 网格将起作用:https://www.codeply.com/go/JmHRmJ5CYD

最后一个选项是自动布局网格列，它将适合卡片的大小，但不会为您提供确切的 4 张卡片，然后在移动设备上提供 2 张卡片:https://www.codeply.com/go/xLXsbRSaMB