时间戳

首页 > 解决方案 > 引导 4 卡 - 具有可变标题行行的垂直对齐主体

html - 引导 4 卡 - 具有可变标题行行的垂直对齐主体

问题描述

在我的简单设计中，我使用卡片来展示一些产品。但是，有些产品标题包含 2 行，而其他产品标题仅包含 1 行。

我想让正文垂直对齐（以及价格按钮）..

<div class="container">
      <div class="row">
        <div class="col-12">
            <div class="card-group">
                <div class="card text-center" >
                        <img class="card-img-top mx-auto d-block" style="max-width: 100%; max-height: 100%;object-fit: scale-down" src="http://s.s-bol.com/imgbase0/imagebase3/thumb/FC/1/4/7/9/9200000037279741.jpg"  height="200px" alt="Card image cap">
                        <div class="card-body">
                          <h5 class="card-title">AKRACING Nitro Gaming Racestoel - Wit</h5>
                          <p class="card-body">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-danger">€ 279,-</a>
                        </div>
                </div>
                <div class="card text-center" >
                        <img class="card-img-top mx-auto d-block" style="max-width: 100%; max-height: 100%;object-fit: scale-down" src="http://s.s-bol.com/imgbase0/imagebase3/thumb/FC/2/4/2/4/9200000076564242.jpg" height="200px" width="25%" alt="Card image cap">
                        <div class="card-body">
                          <h5 class="card-title">MSI Gaming GS Rugzak</h5>
                          <p class="card-body">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-danger">€ 151,-</a>
                        </div>
                </div>
                <div class="card text-center" >
                        <img  class="card-img-top mx-auto d-block" style="max-width: 100%; max-height: 100%;object-fit: scale-down" src="http://s.s-bol.com/imgbase0/imagebase3/thumb/FC/3/2/4/9/9200000088829423.jpg"  height="200px" alt="Card image cap">
                        <div class="card-body">
                          <h5 class="card-title">DJI Mavic Air Onyx Zwart - Drone</h5>
                          <p class="card-body">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-danger">€ 753,91</a>
                        </div>
                </div>
                <div class="card text-center" >
                        <img class="card-img-top mx-auto d-block" style="max-width: 100%; max-height: 100%;object-fit: scale-down" src="http://s.s-bol.com/imgbase0/imagebase3/thumb/FC/1/7/0/9/9200000063589071.jpg"  height="200px" alt="Card image cap">
                        <div class="card-body">
                          <h5 class="card-title">BenQ TH683 - Full HD Beamer</h5>
                          <p class="card-body">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-danger">€ 589,-</a>
                        </div>
                </div>

            </div>
        </div>
          </div>

</div>

工作代码片段可以在这里找到：https ://www.codeply.com/go/zzm764UnFU

编辑添加的代码也内联

标签： htmlcssbootstrap-4alignment

解决方案

正如@Paulie_D 提到的，实际上没有简单的方法来对齐卡片中的项目，因为这些项目具有不同的父卡。

您能做的最好的事情是将按钮和描述推到底部（使用mt-auto），以便按钮与底部对齐......

  <div class="card text-center">
       <img class="card-img-top mx-auto d-block" style="max-width: 100%;">
       <div class="card-body d-flex flex-column align-items-center">
            <h5 class="card-title">AKRACING Nitro Gaming Racestoel - Wit</h5>
            <p class="mt-auto">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="mt-auto btn btn-danger">€ 279,-</a>
       </div>
  </div>

https://www.codeply.com/go/vQPUwL7GLY

推荐阅读