Bootstrap Columns 垂直堆叠

Question

在我正在创建的网站的帖子部分中，我有 4 列，每个帖子中的帖子根据其内容具有不同的高度。引导 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

Answer 2

这是一个经常被解决的棘手问题。网页在网格中更容易编码，所以事情往往是在列和行中。在您的示例中，包装时行需要足够高以包含您的第三个项目。这意味着如果第四项位于您想要的位置，它将在第一项的单元格内。

您可以使用Masonary 之类的东西，我相信它会在您调整大小时计算顶部和左侧位置。或者我认为你可以使用 flex 和大量的包装 div，但这会变得混乱并且是可怕的维护。它太乱了，我从来没有把它投入生产，要么是因为我在尝试时失去了理智，要么是因为它只是在一个小例子中工作时不想维护它。

Masonary 允许相当简单的布局

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item grid-item--height3"></div>
  <div class="grid-item grid-item--height2"></div>
</div>

JSFiddle example