在bootstrap 3＆＃34; card＆＃34;中使用CSS的问题和动态内容

Question

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

您可以看到问题出在哪里：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我最终使用＆＃34; width：calc（100％ - 30px）＆＃34;卡片动作元素，但我希望不使用创可贴修复。