我试图让我用HTML和CSS创建的卡片能够与bootstrap对齐。 目前它只在该部分的中间,我不知道如何让4张卡片排成一行,然后再让另外4张卡片排成一行在它下面。
下面是HTML
<div class="card-container mx-auto mt-5">
<div class="row">
<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>
如果你做的卡片是按照预期的工作,现在你只是想用bootstrap把它们四个排成一排,那么你可以简单地通过把卡片html包装成bootstrap-grid列类来实现,比如。
<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,使其更多地包含在列中。
希望这是你问的问题,能解决这个问题。