bootstrap 4 cards - vertical alignment body with variable header line rows

问题

In my simple design I use cards to show some products. However some product titles wrap 2 lines while others wrap only 1 line.

I would like to have the body text vertically aligned (and the price buttons too)..

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

working code snippet can be found here: https://www.codeply.com/go/zzm764UnFU

edit added code also inline

回答1:

As @Paulie_D mentioned there's really no simple way to align the items within the cards since those items have different parent cards.

The best you can do is push the buttons and descriptions to the bottom (using mt-auto) so that the buttons align to the bottom...

  <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

来源：https://stackoverflow.com/questions/51860518/bootstrap-4-cards-vertical-alignment-body-with-variable-header-line-rows

标签

html

css

bootstrap-4

alignment