在这个snipper中，我希望Bootstrap列的高度由其内容定义，而不是由同一行中可见的最高元素定义。换言之，我希望这些卡片中的每一张都在顶部的卡片下面开始几个像素，无论顶部的一行中是否有一张大卡。我该怎么做？
.card-container {
width: 100%;
overflow: hidden;
position: relative;
background-color: white;
margin-bottom: 15px;
box-shadow: 0 0 10px rgb(0 0 0 / 30%);
border: 1px solid rgba(204, 204, 204, 1);
transition: all 0.5s ease-in-out;
}
.card-container:hover {
box-shadow: 0 0 10px rgb(0 0 0 / 50%);
}
.card-image {
max-height: 200px;
overflow: hidden;
}
.card-image-src {
width: 100%;
transition: all 1s ease-in-out;
}
.card-image-src:hover {
transform: scale(1.1);
}
.card-text {
padding: 15px;
}
.card-title {
text-align: center;
}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container p-3 my-3">
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="card-container">
<div class="card-image d-flex align-items-center">
<img src="https://online-learning.harvard.edu/sites/default/files/styles/header/public/course/cs50x-original.jpg" class="card-image-src">
</div>
<div class="card-text">
<h1 class="card-title">
Harvard CS50
</h1>
<p class="card-description">
This is CS50x , Harvard University's introduction to the intellectual enterprises of computer science and the art of programming for majors and non-majors alike, with or without prior programming experience. An entry-level course taught by David J. Malan,
CS50x teaches students how to think algorithmically and solve problems efficiently. Topics include abstraction, algorithms, data structures, encapsulation, resource management, security, software engineering, and web development. Languages
include C, Python, SQL, and JavaScript plus CSS and HTML. Problem sets inspired by real-world domains of biology, cryptography, finance, forensics, and gaming. The on-campus version of CS50x , CS50, is Harvard's largest course. Students who
earn a satisfactory score on 9 problem sets (i.e., programming assignments) and a final project are eligible for a certificate. This is a self-paced course–you may take CS50x on your own schedule.
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card-container">
<div class="card-image d-flex align-items-center">
<img src="https://online-learning.harvard.edu/sites/default/files/styles/header/public/course/cs50x-original.jpg" class="card-image-src">
</div>
<div class="card-text">
<h1 class="card-title">
Harvard CS50
</h1>
<p class="card-description">
This is CS50x , Harvard University's introduction to the intellectual enterprises of computer science and the art of programming for majors and non-majors alike, with or without prior programming experience.
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card-container">
<div class="card-image d-flex align-items-center">
<img src="https://online-learning.harvard.edu/sites/default/files/styles/header/public/course/cs50x-original.jpg" class="card-image-src">
</div>
<div class="card-text">
<h1 class="card-title">
Harvard CS50
</h1>
<p class="card-description">
This is CS50x , Harvard University's introduction to the intellectual enterprises of computer science and the art of programming for majors and non-majors alike, with or without prior programming experience. An entry-level course taught by David J. Malan,
CS50x teaches students how to think algorithmically and solve problems efficiently. Topics include abstraction, algorithms, data structures, encapsulation, resource management, security, software engineering, and web development. Languages
include C, Python, SQL, and JavaScript plus CSS and HTML. Problem sets inspired by real-world domains of biology,
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card-container">
<div class="card-image d-flex align-items-center">
<img src="https://online-learning.harvard.edu/sites/default/files/styles/header/public/course/cs50x-original.jpg" class="card-image-src">
</div>
<div class="card-text">
<h1 class="card-title">
Harvard CS50
</h1>
<p class="card-description">
This is CS50x , Harvard University's introduction to the intellectual enterprises of computer science and the art of programming for majors and non-majors alike, with or without prior programming experience. An entry-level course taught by David J. Malan,
CS50x teaches students how to think algorithmically and solve problems efficiently. Topics include abstraction, algorithms, data structures, encapsulation, resource management, security, software engineering, and web development. Languages
include C, Python, SQL, and JavaScript plus CSS and HTML. Problem sets inspired by real-world domains of biology, cryptography, finance, forensics, and gaming. The on-campus version of CS50x , CS50, is Harvard's largest course. Students who
earn a satisfactory score on 9 problem sets (i.e., programming assignments) and a final project are eligible for a certificate. This is a self-paced course–you may take CS50x on your own schedule.
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card-container">
<div class="card-image d-flex align-items-center">
<img src="https://online-learning.harvard.edu/sites/default/files/styles/header/public/course/cs50x-original.jpg" class="card-image-src">
</div>
<div class="card-text">
<h1 class="card-title">
Harvard CS50
</h1>
<p class="card-description">
This is CS50x , Harvard University's introduction to the intellectual enterprises of computer science and the art of programming for majors and non-majors alike, with or without prior programming experience. An entry-level course taught by David J. Malan,
CS50x teaches students how to think algorithmically and solve problems efficiently. Topics include abstraction, algorithms, data structures, encapsulation, resource management, security, software engineering, and web development. Languages
include C, Python, SQL, and JavaScript plus CSS and HTML. Problem sets inspired by real-world domains of biology, cryptography, finance, forensics, and gaming. The on-campus version of CS50x , CS50, is Harvard's largest course. Students who
earn a satisfactory score on 9 problem sets (i.e., programming assignments) and a final project are eligible for a certificate. This is a self-paced course–you may take CS50x on your own schedule.
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card-container">
<div class="card-image d-flex align-items-center">
<img src="https://online-learning.harvard.edu/sites/default/files/styles/header/public/course/cs50x-original.jpg" class="card-image-src">
</div>
<div class="card-text">
<h1 class="card-title">
Harvard CS50
</h1>
<p class="card-description">
This is CS50x , Harvard University's introduction to the intellectual enterprises of computer science and the art of programming for majors and non-majors alike, with or without prior programming experience. An entry-level course taught by David J. Malan,
CS50x teaches students how to think algorithmically and solve problems efficiently. Topics include abstraction, algorithms, data structures, encapsulation, resource management, security, software engineering, and web development. Languages
include C, Python, SQL, and JavaScript plus CSS and HTML. Problem sets inspired by real-world domains of biology, cryptography, finance, forensics, and gaming. The on-campus version of CS50x , CS50, is Harvard's largest course. Students who
earn a satisfactory score on 9 problem sets (i.e., programming assignments) and a final project are eligible for a certificate. This is a self-paced course–you may take CS50x on your own schedule.
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card-container">
<div class="card-image d-flex align-items-center">
<img src="https://online-learning.harvard.edu/sites/default/files/styles/header/public/course/cs50x-original.jpg" class="card-image-src">
</div>
<div class="card-text">
<h1 class="card-title">
Harvard CS50
</h1>
<p class="card-description">
This is CS50x , Harvard University's introduction to the intellectual enterprises of computer science and the art of programming for majors and non-majors alike, with or without prior programming experience. An entry-level course taught by David J. Malan,
CS50x teaches students how to think algorithmically and solve problems efficiently. Topics include abstraction, algorithms, data structures, encapsulation, resource management, security, software engineering, and web development. Languages
include C, Python, SQL, and JavaScript plus CSS and HTML. Problem sets inspired by real-world domains of biology, cryptography, finance, forensics, and gaming. The on-campus version of CS50x , CS50, is Harvard's largest course. Students who
earn a satisfactory score on 9 problem sets (i.e., programming assignments) and a final project are eligible for a certificate. This is a self-paced course–you may take CS50x on your own schedule.
</p>
</div>
</div>
</div>
</div>
</div>你能检查下面的代码链接吗？希望对你有用。你只需要给height: calc(100% - 15px);到.card-container。
请参阅此链接：https://jsfiddle.net/yudizsolutions/zqmxecdo/1/