Bootstrap 4.1右列垂直堆叠左图右文用户卡片布局适配问题

解决方案代码 #

修改后的HTML结构

<div class="row">
    <div class="col-sm-8 teams teams-overview">
    ... 原有左侧内容
    </div>
    <!-- 若需要保持原有3份占比可改回col-sm-3，不影响卡片逻辑 -->
    <div class="col-sm-4 teams team-details">
        <!-- 动态生成的卡片直接堆叠在此处，不需要额外嵌套row -->
        <div class="card mb-3 w-100 flex-row">
            <img src="..." class="user-avatar align-self-center" alt="用户头像">
            <div class="card-body">
                <h5 class="card-title">用户名称</h5>
                <p class="card-text">任意长度的介绍文本，不管多长左侧头像都会保持垂直居中。</p>
                <a href="#" class="btn btn-primary btn-sm">查看详情</a>
            </div>
        </div>
        <div class="card mb-3 w-100 flex-row">
            <img src="..." class="user-avatar align-self-center" alt="用户头像">
            <div class="card-body">
                <h5 class="card-title">另一个用户</h5>
                <p class="card-text">更短的文本示例。</p>
                <a href="#" class="btn btn-primary btn-sm">查看详情</a>
            </div>
        </div>
    </div> 
</div>

补充自定义CSS

/* 头像基础样式，尺寸可根据需求调整 */
.user-avatar {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-top-left-radius: calc(0.25rem - 1px);
    border-bottom-left-radius: calc(0.25rem - 1px);
}

/* 小屏幕自动切换为纵向卡片布局，适配移动端 */
@media (max-width: 576px) {
    .card.flex-row {
        flex-direction: column !important;
    }
    .user-avatar {
        width: 100%;
        height: 120px;
        border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0 !important;
    }
}

关键修改说明 #

• 移除右侧列内多余的row嵌套，卡片直接作为列的子元素，配合w-100类让卡片自动撑满右侧列的全部宽度，解决宽度不足、对齐异常的问题。
• 给卡片添加flex-row类实现横向布局，替换原来的顶部图片结构，达成左图右文的效果。
• 头像添加align-self-center类实现垂直居中，无论右侧文本长度怎么变化，头像始终保持在卡片垂直中间位置。
• 头像固定宽高配合object-fit: cover保证图片不变形，同时适配卡片圆角样式。
• 内置响应式适配逻辑，窗口尺寸变化时卡片会自动调整布局，保持展示效果正常。

内容的提问来源于stack exchange，提问作者CMorgan