我有一定数量的卡片。我想以以下方式将它们显示在固定高度的两列中：首先，我想填充第1列；当到达col1的末端时，开始填充col2(见图(。
如何使用Bootstrap 5做到这一点？
垂直堆叠在两列上的卡片
更新
这是我的代码：
<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/
这种类型的布局被称为砖石布局。访问这个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>