引导程序 3“卡片”和动态内容中的 CSS 问题

Question

我正在生成包含动态内容的引导卡。这些是个人的“个人资料”，他们的照片大小都不同。因此，我正在使用 jQuery 修改每张卡片上的 .card 类高度，使其与页面上最高卡片的高度相同。这样做时，.card-actions 类（带有链接的页脚）没有正确定位，所以我设置了position: absolute 和bottom: 0;。正如预期的那样，.card-actions 现在位于卡片的底部，但它没有占据 .card 类 div 的整个宽度。

您可以在下面看到问题所在：

var maxHeight = -1;
$('.bio-profile').each(function() {
    maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
});
$('.bio-profile').each(function() {
    $(this).height(maxHeight);
});

.card {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.card {
    margin-top: 10px;
    box-sizing: border-box;
    border-radius: 2px;
    background-clip: padding-box;
}
.card.bio-profile .card-header {
    background-color: var(--turq);
    text-align: center;
    font-weight: 700;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 10px 10px 0 0;
}
.card span.card-title {
    color: #fff;
    font-size: 24px;
    font-weight: 300;
    text-transform: uppercase;
}
.card .card-image {
    position: relative;
    overflow: hidden;
}
.card .card-image img {
    background-clip: padding-box;
    position: relative;
    z-index: -1;
    display: block;
    margin: 0 auto;
}
.card .card-content {
    padding: 16px;
    border-radius: 0 0 2px 2px;
    background-clip: padding-box;
    box-sizing: border-box;
}
.card .card-content p {
    margin: 0;
    color: inherit;
    font-size: 14px
}
.card .card-action {
    border-top: 1px solid rgba(160, 160, 160, 0.2);
    padding: 16px;
    background-color: var(--mesa);
}
.card .card-action a {
    color: #895715;
    margin-right: 16px;
    transition: color 0.3s ease;
    text-transform: uppercase;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 bio-content" id="bio' + i + '" group="' + gSearch + '">
    <div class="card bio-profile show">
        <div class="card-header"><a href="link" target="_blank">name</a></div>
        <div class="card-image"><a href="link" target="_blank"><img class="card-img-top img-responsive bio-thumb" src="img" alt="name-thumb"></a></div>
        <div class="card-content">
            <h4 class="card-title">Group</h4>
            <p class="card-text">Job</p>
            <p class="card-text">Email</p>
            <p class="card-text">Room</p>
        </div>
        <div class="card-action">
            <a href="linkedinlink"><span class="fa fa-linkedin"></span></a>
            <a href="twitterlink"><span class="fa fa-twitter"></span></a>
            <a href="facebooklink"><span class="fa fa-facebook"></span></a>
            <a href="NIHlink">NIH</a>
            <a href="publicationslink">Publications</a>
        </div>
    </div>
</div>

Answer 1

我最终在卡片操作元素上使用“width: calc(100% - 30px)”修复它，但我希望不要使用创可贴修复。