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-flexcard-body上的flex-column
按钮上的mt-auto和按钮窗体周围的封闭<div>中的text-center
但是,输出如下所示:

vxf3dgd4

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>

相关问题