html - Bootstrap 列垂直堆叠

Question

在我正在创建的网站的帖子部分，我有 4 列，每个帖子中的帖子根据其内容具有不同的高度。 bootstrap 4 网格系统。根据 下的照片

当我调整第 4 列的大小时重新排列。

正如您在上图中看到的那样，第 4 列移动到第 1 列下方，但它基于第 3 列的高度对齐。我想像下面的照片一样堆叠。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row pt-3 port-folio-margins pb-5 pr-4 pl-4">
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 pl-1 pr-1 ">
    <div class="post-container">
      <div class="post-image"> </div>
      <div class="post-title">TEST2016</div>
      <div class="post-share-icons"></div>

    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 pl-1 pr-1 ">
      <div class="post-container">
        <div class="post-image"> </div>
        <div class="post-title">TEST2016</div>
        <div class="post-share-icons"></div>

      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 pl-1 pr-1 ">
        <div class="post-container">
          <div class="post-image"> </div>
          <div class="post-title">TEST2016</div>
          <div class="post-share-icons"></div>

        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 pl-1 pr-1 ">
          <div class="post-container">
            <div class="post-image"> </div>
            <div class="post-title">TEST2016</div>
            <div class="post-share-icons"></div>

          </div>
        </div>

所以问题是如何使用 Bootstrap 或不使用 Bootstrap 来实现 CSS 格式化。我曾尝试使用“flex wrap”和“clearfix”放置“float”，但没有结果。

Answer 1

Bootstrap 有一个针对此问题的内置实用程序，您可以使用卡片并将它们包装在卡片列中。请参阅文档 here