Question

我的页面上有一个区域，我会生成一定尺寸的卡片（250 * 250）。但我希望每行最多4张卡片（在小视口上我会堆叠它们）。现在，它可以使用4张卡以及更多（超出部分会破坏并进入另一条线，一切都很好）。但问题是我的卡少于4张（可能会发生）。这些卡来自我在运行时生成的数据库。顺便说一句，这是一个rails应用程序。

我希望卡片在保持尺寸在行内的同时对齐，如果少于4张卡片，则左右边距更多。

我想到的设计是4张或更多张卡的设计：

且小于4，例如2张这样的牌：

当我有2张牌时会发生这种情况：

这就是我对5张牌的看法：

保证金，我可以合作。

问题： 我怎样才能解决这个问题，在大屏幕上只有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;
  }
}

如果您可以在卡片大小不是250px时允许更大的灵活性，那么Bootstrap网格将起作用：https://www.codeply.com/go/JmHRmJ5CYD

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

动态更改引导程序中的列排列，同时保留响应能力

1 个答案: