如果您制作的卡片按预期工作,现在您只想使用引导程序连续显示其中四个,那么您可以通过将卡片 html 包装在引导网格列类中来实现这一点,例如:
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md-3">
<div class="card-container mx-auto mt-5">
<div class="card card-front">
<img class="card-img-top" src="Assets/aspentree.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the
card's content.</p>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the
card's content.</p>
<!--<a href="#" class="btn btn-primary">Go somewhere</a>-->
</div>
</div>
<div class="card card-back">
<div class="card-body bg-warning">
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div><!-- ./col -->
<div class="col-12 col-md-3">
<div class="card-container mx-auto mt-5">
<div class="card card-front">
<img class="card-img-top" src="Assets/aspentree.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the
card's content.</p>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the
card's content.</p>
<!--<a href="#" class="btn btn-primary">Go somewhere</a>-->
</div>
</div>
<div class="card card-back">
<div class="card-body bg-warning">
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div><!-- ./col -->
<div class="col-12 col-md-3">
<div class="card-container mx-auto mt-5">
<div class="card card-front">
<img class="card-img-top" src="Assets/aspentree.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the
card's content.</p>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the
card's content.</p>
<!--<a href="#" class="btn btn-primary">Go somewhere</a>-->
</div>
</div>
<div class="card card-back">
<div class="card-body bg-warning">
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div><!-- ./col -->
<div class="col-12 col-md-3">
<div class="card-container mx-auto mt-5">
<div class="card card-front">
<img class="card-img-top" src="Assets/aspentree.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the
card's content.</p>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the
card's content.</p>
<!--<a href="#" class="btn btn-primary">Go somewhere</a>-->
</div>
</div>
<div class="card card-back">
<div class="card-body bg-warning">
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div><!-- ./col -->
</div> <!-- ./row -->
</div><!-- ./container-fluid -->
我已将其分成row
四部分cols
,以便创建一个新行,您可以复制它。
还尝试将宽度设置为.card-container
百分比而不是 rem 以使其更多地包含在列中。
希望这是您所问的,它可以解决问题。