我正在尝试为自举卡片组指定列数,因为我希望每张卡片的宽度和高度均相等。我可以使用ROW和COL- *结合卡片类别来指定列数,但是所有卡片之间的高度和间距根据卡片主体是随机的。 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>