如何实现左侧大Feather图标+右侧标题描述的Bootstrap Flex布局

你的布局问题主要出在垂直对齐和分隔线的居中处理上，现有代码里的align-items-start会让左右模块顶部对齐，中间分隔线容器的固定高度也导致无法和左右模块匹配对齐。以下是两种解决思路：

方案一：修正现有Bootstrap网格布局 #

调整类名实现垂直居中，让分隔线和左右模块视觉对齐：

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="row align-items-center"> <!-- 给行添加垂直居中，让三列整体对齐 -->
                    <div class="col-5">
                        <div class="d-flex align-items-center"> <!-- 改成align-items-center，让图标和文字垂直居中 -->
                            <div class="avatar me-75">
                                <i data-feather="upload" class="avatar-icon"></i>
                            </div>
                            <div>
                                <p class="mb-0">Lorem ipsum</p>
                                <p class="mb-0">lorem ipsum dolor sit amet lorem ipsum</p> <!-- 去掉多余margin，避免高度不一致 -->
                            </div>
                        </div>
                    </div>
                    <div class="col-2">
                        <div class="d-flex align-items-center justify-content-center h-100"> <!-- 让分隔线容器占满行高并居中 -->
                            <div class="vr h-50"></div> <!-- 用h-50设置分隔线高度为容器的50%，更贴近mockup -->
                        </div>
                    </div>
                    <div class="col-5">
                        <div class="d-flex align-items-center"> <!-- 同样改成垂直居中 -->
                            <div class="avatar me-75">
                                <i data-feather="user-plus" class="avatar-icon"></i>
                            </div>
                            <div>
                                <p class="mb-0">Lorem ipsum</p>
                                <p class="mb-0">lorem ipsum dolor sit amet lorem ipsum</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

关键修改点：

• 给外层row添加align-items-center，让三列整体垂直居中
• 左右模块的d-flex容器改成align-items-center，让图标和文字垂直对齐
• 中间列的容器添加h-100占满行高，结合align-items-center justify-content-center让分隔线居中，同时用h-50控制分隔线高度

方案二：用原生Flex布局替代网格（更简洁） #

如果不需要严格依赖网格列宽，直接用Bootstrap的Flex工具类实现，更灵活：

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body d-flex align-items-center justify-content-between">
                <!-- 左侧模块 -->
                <div class="d-flex align-items-center flex-1">
                    <div class="avatar me-75">
                        <i data-feather="upload" class="avatar-icon"></i>
                    </div>
                    <div>
                        <p class="mb-0">Lorem ipsum</p>
                        <p class="mb-0">lorem ipsum dolor sit amet lorem ipsum</p>
                    </div>
                </div>
                
                <!-- 中间分隔线 -->
                <div class="vr mx-4 h-50"></div>
                
                <!-- 右侧模块 -->
                <div class="d-flex align-items-center flex-1 justify-content-end"> <!-- 右侧可以按需调整对齐方式 -->
                    <div class="avatar me-75">
                        <i data-feather="user-plus" class="avatar-icon"></i>
                    </div>
                    <div>
                        <p class="mb-0">Lorem ipsum</p>
                        <p class="mb-0">lorem ipsum dolor sit amet lorem ipsum</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

这种方式直接在card-body上用Flex布局，左右模块用flex-1平分剩余空间，中间分隔线用mx-4控制左右间距，视觉上更贴近mockup的均衡效果。

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