Bootstrap 4:在卡片组内部对齐内容 [英] Bootstrap 4 : align content inside cards deck

问题描述

我的Bootstrap 4页面上有几副纸牌.我想对齐这些按钮以使其外观更好.我们该怎么做?

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?

这是一张图片:

这是演示: http://7freres.com/new

该表似乎是无效的，因为它们是分开的.

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

谢谢

推荐答案

您可以使所有card-text元素具有相同的高度. 一种方法是通过javascript.编写这样的函数:

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);
}

或使用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);
}

这将使您:

这篇关于Bootstrap 4:在卡片组内部对齐内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！