Bootstrap 列垂直堆叠

Question

在我正在创建的网站的 post 部分中，我有 4 列 post 每个 post 具有不同的高度基于它的内容。 bootstrap4格系统。根据

下的照片

当我调整第 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

这是一个棘手的问题，通常可以解决。网页在网格中编写代码要容易得多，因此内容往往在列和行中。在您的示例中，包裹时行需要足够高以包含您的第三个项目。这意味着如果第四项位于您想要的位置，它将位于第一项的单元格内。

您可以使用 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

Answer 2

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

Bootstrap 列垂直堆叠

Bootstrap Columns Vertical stacking

html

css

css-float

flexbox

twitter-bootstrap