html - Bootstrap如何修复动态列表数据

我已经在页面上显示了列表项，但是我无法显示它们。当我在每个项目中都有不同的内容时，它将不匹配。我该怎么办？
我想在左侧移动最后一个项目以获取空间。

这是我的代码：

.single-profile-top, .single-profile-bottom {
  border: 1px solid #ddd;
  padding: 15px;
  position: relative;
  margin-bottom: 40px;
}

最佳答案

Jquery可用于使所有列表数据具有相同的高度。

参考答案link

function setEqualHeight(selector, triggerContinusly) {
    var elements = $(selector)
    elements.css("height", "auto")
    var max = Number.NEGATIVE_INFINITY;

    $.each(elements, function(index, item) {
        if ($(item).height() > max) {
            max = $(item).height()
        }
    })

    $(selector).css("height", max + "px")

    if (!!triggerContinusly) {
        $(document).on("input", selector, function() {
            setEqualHeight(selector, false)
        })

       $(window).resize(function() {
            setEqualHeight(selector, false)
       })
    }


}
setEqualHeight(".sameh", true)