我正在使用下面的代码为一些项目生成一张卡片。卡片底部的按钮需要与卡片的底部对齐,为此我使用了以下代码:
return '
<div class="col">
<div class="card detailpage-related-items" style="width: 100%;">
<div class="card-body d-flex flex-column p-4 card-detailpage" style="width: 100%;"><img class="d-flex recommended-products-thumbnail" src="https://iproject1.ip.aimsites.nl/pics/' . $afbeelding . '">
<h4 class="card-title">' . $voorwerpnaam . '</h4>
<h5 class="card-title"><strong>€' . $prijs . '</strong></h5>
<p>Loopt tot: ' . $eindtijd . '</p>
<div class="text-center">
<form action="/detail.php" method="get">
<input type="hidden" name="veiling" id="veiling" value="' . $voorwerpnummer . '">
<input type="submit" class="bid-button mt-auto" value="Bieden">
</form>
</div>
</div>
</div>
</div>
';
d-flex
和card-body
上的flex-column
,
按钮上的mt-auto
和按钮窗体周围的封闭<div>
中的text-center
。
但是,输出如下所示:
1条答案
按热度按时间vxf3dgd41#
创建2个带有按钮的div,将卡片主体中的图片和标题组合成一个div。然后将h-100和justify-content-between类添加到包含卡片主体类的div中。我认为这将解决您的问题。