Bootstrap 4 : align content inside cards deck

问题:

I have a deck of cards in my Bootstrap 4 page. I want to align these button to have a nicer look. How can we do that?

Here is an image:

And here is the demo : http://7freres.com/new

The table dosen't seem to works, as they are separated.

Thanls

回答1:

You can make all the card-text elements to have the same height. One way to do it can be through javascript. Write a function like this:

document.addEventListener("DOMContentLoaded", function(event) { 
    adjustCardTextHeights();
});

function adjustCardTextHeights() {
    var heights = $(".card-text").map(function() {
        return $(this).height();
    }).get();

    maxHeight = Math.max.apply(null, heights);

    $(".card-text").height(maxHeight);
}

Or with jQuery:

$( document ).ready(function() {
    adjustCardTextHeights();
});

function adjustCardTextHeights() {
    var heights = $(".card-text").map(function() {
        return $(this).height();
    }).get();

    maxHeight = Math.max.apply(null, heights);

    $(".card-text").height(maxHeight);
}

This gets you:

回答2:

You could set position: absolute; bottom: 20px; for the buttons and add an extra padding-bottom: 50px; to the card-block