php 使用bootstrap将按钮与卡底部对齐

q9rjltbz 于 2022-12-21 发布在 PHP

关注(0)|答案(1)|浏览(192)

我正在使用下面的代码为一些项目生成一张卡片。卡片底部的按钮需要与卡片的底部对齐，为此我使用了以下代码：

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。
但是，输出如下所示：

php

来源：https://stackoverflow.com/questions/74864603/align-buttons-to-bottom-of-card-using-bootstrap

1条答案

按热度按时间

vxf3dgd41#

创建2个带有按钮的div，将卡片主体中的图片和标题组合成一个div。然后将h-100和justify-content-between类添加到包含卡片主体类的div中。我认为这将解决您的问题。

<div class="col">
  <div class="card detailpage-related-items" style="width: 100%;">
    <div class="card-body d-flex h-100 justify-content-between flex-column p-4 card-detailpage" style="width: 100%;"><img class="d-flex recommended-products-thumbnail" src="https://iproject1.ip.aimsites.nl/pics/' . $afbeelding . '">
      <div>
        <h4 class="card-title">' . $voorwerpnaam . '</h4>
        <h5 class="card-title"><strong>€' . $prijs . '</strong></h5>
        <p>Loopt tot: ' . $eindtijd . '</p>
      </div>

      <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>

赞(0）回复(0）举报 2022-12-21

我来回答

php 使用bootstrap将按钮与卡底部对齐

1条答案

相关问题

热门标签

最新问答