我正在尝试为自举卡片组指定列数，因为我希望每张卡片的宽度和高度均相等。
高度必须根据卡片的内容是动态的，就像卡片组所提供的并在所有卡片之间提供相等的间距一样。
我可以使用ROW和COL- *对卡类指定列数，但是所有卡之间的高度和间距根据卡主体是随机的。 CARD-DECK类为我提供了每张卡相同的高度和宽度，但是我似乎无法控制列数，在这种情况下，我希望成为两列。
我之前曾问过这个问题，但通过参考以下问题，它自动被关闭，但是当有几排卡时，我没有看到它们成功解决每张卡上具有相同高度的问题。
Bootstrap 4 card-deck with number of columns based on viewport
bootstrap 4 card-deck containing cards with different width
How to limit number of columns of card-deck?
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-6">
<div class="card mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 1</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 2</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 3</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 4</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
</div>
<div class="card-deck">
<div class="card mb-3 bg-success">
<div class="card-body">
<h4 class="card-title">Card 1</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
<div class="card mb-3 bg-success">
<div class="card-body">
<h4 class="card-title">Card 2</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
<div class="card mb-3 bg-success">
<div class="card-body">
<h4 class="card-title">Card 3</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
<div class="card mb-3 bg-success">
<div class="card-body">
<h4 class="card-title">Card 4</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
Bootstrap提供了一些类，以使内容占元素容器宽度或高度的25％，50％，75％或100％，您可以将类h-100添加到卡中，以便它们使用完整可用高度，如果内容更多的列变大，则会增加。
此处的文档：https://getbootstrap.com/docs/4.3/utilities/sizing/
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-6">
<div class="card h-100 mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 1</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card h-100 mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 2</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card h-100 mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 3</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card h-100 mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 4</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
</div>
</div>