Bootstrap 4：对齐卡片组内的内容答案

【问题标题】：Bootstrap 4 : align content inside cards deckBootstrap 4：对齐卡片组内的内容
【发布时间】：2016-03-11 11:45:16
【问题描述】：

我的 Bootstrap 4 页面中有一副牌。我想对齐这些按钮以获得更好的外观。我们该怎么做？

这是一张图片：

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

表格似乎不起作用，因为它们是分开的。

感谢

【问题讨论】：

"...看看更好看" 非常模糊。究竟你想达到什么目的？
@SexyTurnip 我希望按钮在移动设备和桌面设备上对齐。
来自未来的问候。由于引用了原代码的外部链接，现在链接是404，所以这个问题没用。这就是为什么应始终在问题中发布代码的原因。

标签： html css twitter-bootstrap html-table bootstrap-4

【解决方案1】：

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

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

这会让你：

【讨论】：

我已经添加了window.onload = function() { function adjustCardTextHeights() { var heights = $(".card-text").map(function() { return $(this).height(); }).get(); maxHeight = Math.max.apply(null, heights); $(".card-text").height(maxHeight); }; };，它的工作量不大。你是怎么做到的？
那么你也应该在onload中调用带有adjustCardTextHeights ()的函数。或者你可以去掉这个函数，只在 onload 函数中有内容。

【解决方案2】：

您可以为按钮设置position: absolute; bottom: 20px;，并在card-block 中添加额外的padding-bottom: 50px;

【讨论】：