Bootstrap Columns垂直堆叠

Question

在我正在创建的网站的帖子部分中，我在每个帖子中有4个帖子，每个帖子都有不同的高度，基于它的内容。 bootstrap 4网格系统。根据{{​​3}}下的照片

当我调整第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有一个内置的实用程序可以解决这个问题，你可以使用卡片并将它们包装在卡片列中。请参阅文档ActionFilters

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