卡片垂直堆叠在两列固定高度上答案

【问题标题】：Cards stacked vertically on two columns of fixed height卡片垂直堆叠在两列固定高度上
【发布时间】：2022-01-26 08:06:55
【问题描述】：

我有一定数量的卡片。我想通过以下方式将它们显示在固定高度的两列中：首先我要填充列号 1；当到达 col1 的末尾时，开始填充 col2（见图）。

如何使用 Bootstrap 5 做到这一点？

cards stacked vertically on two columns

更新

这是我的代码：

    <div class="container-lg">
      <h2 class="">Technology Portal</h2>
      <div class="row row-cols-md-2">
    
        <div class="col col-links">
          <div class="card text-left">
            <div class="card-body">
              <p class="imp-title">Card 1</p>
              ...
            </div>
          </div>
        </div>
    
        <div class="col col-links">
          <div class="card text-left">
            <div class="card-body">
              <p class="imp-title">Card 2</p>
              ...
            </div>
          </div>
        </div>
    
        <div class="col col-links">
          <div class="card text-left">
            <div class="card-body">
              <p class="imp-title">Card 3</p>
              ...
            </div>
          </div>
        </div>
    
        <div class="col col-links">
          <div class="card text-left">
            <div class="card-body">
              <p class="imp-title">Card 4</p>
              ...
            </div>
          </div>
        </div>
    
        <div class="col col-links">
          <div class="card text-left">
            <div class="card-body">
              <p class="imp-title">Card 5</p>
              ...
            </div>
          </div>
        </div>
    
        ...
    
      </div>
    </div>

解决方案

Gahan Vig 帮助我找到了解决方案。

这里是：

<style>
.masonry { /* Masonry container */
  column-count: 2;
  column-gap: 1em;
}

.item { /* Masonry bricks or child elements */
  background-color: #eee;
  display: inline-block;
  margin: 0 0 1em;
  width: 100%;
}
</style>

<div class="masonry">
  <div class="card item">
    <h1>card1</h1>
  </div>
  <div class="card item">
    <h1>card2</h1>
  </div>
  <div class="card item">
    <h1>card3</h1>
  </div>
  <div class="card item">
    <h1>card4</h1>
  </div>
  <div class="card item">
    <h1>card5</h1>
  </div>
  <div class="card item">
    <h1>card6</h1>
  </div>
  <div class="card item">
    <h1>card7</h1>
  </div>
  <div class="card item">
    <h1>card8</h1>
  </div>
  <div class="card item">
    <h1>card9</h1>
  </div>
  <div class="card item">
    <h1>card10</h1>
  </div>
</div>

更多信息在这里： https://w3bits.com/css-masonry/

【问题讨论】：

@Mark，请告诉我我的问题出了什么问题。

标签： bootstrap-5

【解决方案1】：

这种类型的布局称为砖石布局。访问这个 stackoverflow 链接，了解更多如何创建垂直砌体布局

创建布局后完成的代码将如下所示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <style>
    .col-links{
      display: inline-block;
      margin: 0 0 20px;
      page-break-inside: avoid;
      break-inside: avoid;
      width: 50%;
    }
    .row{
       column-count: 2;
       column-gap: 20px;
       column-fill: balance;
      margin: 20px auto 0;
      padding: 2rem;
    }
  </style>
</head>
<body>
  <div class="container-lg">
  <h2 class="">Technology Portal</h2>
  <div class="row row-cols-md-2 w-100">

    <div class="col col-links">
      <div class="card text-left">
        <div class="card-body">
          <p class="imp-title">Card 1</p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus sequi optio explicabo delectus quaerat recusandae consectetur illo eius tempora, aperiam inventore sint fuga eum, error cum corrupti eos iure neque veniam repellat consequatur iusto quae dolor maiores. Similique quisquam nam ducimus ipsum sit quidem consectetur eaque sequi optio non cumque atque eius rerum vitae reprehenderit perferendis, sed eligendi modi inventore architecto sunt labore! Repellat magni eos officia ducimus mollitia vero necessitatibus harum accusantium perferendis explicabo. Dicta quo, sapiente fugit cumque voluptatibus ipsum neque atque, deleniti, debitis tenetur in dolore saepe molestias eum. Eius, error incidunt hic obcaecati vero ipsum nobis.
        </div>
      </div>
    </div>

    <div class="col col-links">
      <div class="card text-left">
        <div class="card-body">
          <p class="imp-title">Card 2</p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus maiores corporis placeat magnam laboriosam fugiat ut assumenda, aperiam sequi rerum reprehenderit vitae animi quasi neque error, amet nulla quae ea. Eius, consequuntur enim architecto incidunt facere fuga, nam modi ea, maxime labore nisi nobis eveniet deleniti quia expedita cum blanditiis?
        </div>
      </div>
    </div>

    <div class="col col-links">
      <div class="card text-left">
        <div class="card-body">
          <p class="imp-title">Card 3</p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, dolorum.
        </div>
      </div>
    </div>

    <div class="col col-links">
      <div class="card text-left">
        <div class="card-body">
          <p class="imp-title">Card 4</p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sequi provident facilis voluptatem voluptate neque illum temporibus sit beatae, eum id iste possimus eveniet inventore ad quaerat hic, asperiores repellendus quia error debitis mollitia culpa, in delectus rem. Dignissimos voluptates voluptatem ut! Eum adipisci illo aliquam officiis hic doloribus quos odit accusantium dolorem sapiente, esse facilis exercitationem asperiores! Quas, consectetur, corporis eum similique earum quibusdam aliquam maxime temporibus animi, odio ratione nesciunt quaerat. Odit quos atque sit porro quod perspiciatis deleniti!
        </div>
      </div>
    </div>

    <div class="col col-links">
      <div class="card text-left">
        <div class="card-body">
          <p class="imp-title">Card 5</p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio labore numquam culpa qui hic id libero soluta illo corporis inventore, deserunt porro corrupti nihil repudiandae.
        </div>
      </div>
    </div>

    ...

  </div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</html>

【讨论】：

感谢您的回答。图书馆很好，但它不能解决我的问题。我需要垂直订购卡片。
给我几分钟来解决这个问题
因此，在您的情况下，您只需要两列，因此您可以给出项目的宽度50%。砌体将保持水平，但看起来像是垂直砌体布局。
我添加了上面的代码。您将如何更改它以使其行为符合我的需要？
我根据你上面给出的代码做了一个垂直砌体布局。