Html 按水平顺序放置引导卡

我有一个简单的页面，有一个导航栏+一个主体div+一个页脚。

我试图实现的是导航栏和页脚在任何情况下都保持在该位置，而只有主空白区域显示这些bootsrap卡，但在水平位置每行最多4个。到目前为止，我管理的是：

 <div="wrap> 
      <navbar boostrap>
     </navbar>
     <form>
        <div class="card">
        </div>
     </form>
    </div>
   <footer>
   </footer>

页脚：

.wrap {
  min-height: 100%;
  margin-bottom: -12vh;
  padding-bottom: 12vh;
}

.footer {
  text-align: center;
  height: 12vh;
  width: 100%;
  background-color: #393e46;
}

之后我做的是在表单中添加一个类来封装bootsrap卡，并在css中执行以下操作：

.form-events {
  display: flex;
  flex-wrap: wrap;
}

---

是否有更好的实践或我的解决方案有效？？？

您可以像这样在“.footer”CSS类中添加

position:fixed

行

 .footer {
    position:fixed;
    bottom:0;
    left:0;
    text-align: center;
    height: 12vh;
    width: 100%;
    background-color: #393e46;
   }

---

通过这样做，即使用户向下滚动页面，它也将保持在页面底部。

如果使用的是引导，您可以尝试执行以下操作。 保持导航栏和页脚不变。唯一需要处理的是主要的空白部分

首先创建一个

，它有一个类容器，

---

然后你可以放另一张

Hmmm，是的，这看起来很有效，但是在我的屏幕上的某个点上，每张卡的内容在垂直堆叠之前相互重叠。