Bootstrap 5 可快速构建个人中心列表页，需用 list-group-flush 去除默认样式，list-group-item 上控制 py/pu 间距与 px-3 留白，头像文字用栅格而非 flex，点击项统一用 list-group-item-action，敏感操作视觉隔离，container-fluid 必配 px-3 防溢出。
Bootstrap 本身不提供“个人中心列表页”的现成模板，但用 Bootstrap 5 的响应式栅格、卡片、列表组和实用工具类，能快速搭出符合移动端体验的结构——关键是别套默认样式，得主动控制断点和间距。
用 list-group 做基础列表结构，但必须加 flush 和自定义内边距
默认的 list-group 在移动端会带圆角、阴影和左右 padding，视觉上像“卡片容器”而非简洁列表项。直接用会显得臃肿。
- 必须加
list-group-flush去掉边框和圆角 - 每个
list-group-item内部用py-3或py-4控制垂直间距（py-2太挤，py-4在小屏上略松） - 避免对整个
list-group设px-0，而应在list-group-item上用px-4或px-3统一左右留白 - 图标建议用
svg内联或bootstrap-icons的bi类，不要依赖字体图标 CDN，否则首屏可能闪动或错位
头像+昵称区域用 row + col-auto + col 组合，别用 flex 手写
很多人想用 d-flex align-items-center 搞头像+文字横排，但在 iOS Safari 下容易因字体渲染导致基线偏移，昵称看起来“悬空”。Bootstrap 原生栅格更稳。
- 外层用
row g-3（g-3是 gap，比mb-3更可控） - 头像列写
col-auto，图片设rounded-circle和固定尺寸如width: 64px; height: 64px; - 文字列用
col，里面再套h5 mb-1（昵称）和text-muted small（会员/ID 等辅助信息） - 整个区块加
border-bottom分隔，但只在移动端生效：border-bottom-md-0配合pb-4 mb-4避免 PC 端多一条线
列表项里放按钮或跳转链接？统一用 list-group-item-action，别混用 a 和 button
混合使用会导致点击热区不一致、iOS 上无反馈、部分安卓机型触发两次事件。Bootstrap 的 list-group-item-action 是专门为此设计的。
- 所有可点击项都用
<a href="..." class="list-group-item list-group-item-action"></a> - 如果需要 JS 控制（比如退出登录），保留
href="#"，但必须加data-bs-toggle="modal"或用preventDefault()，不能裸写onclick - 右侧箭头统一用
float-end+text-muted的>，别用图标——简单、无加载、对齐稳定 - 敏感操作（如注销）单独提出来，放在列表底部，加
text-danger和pt-3 mt-3 border-top视觉隔离
container-fluid 和 px-3 必须配对，否则左右会溢出屏幕
移动端最常犯的错误：用 container-fluid 就以为万事大吉，结果内容顶到屏幕边缘，iOS 上还可能触发横向滚动条。
-
container-fluid只负责 100% 宽度，不处理内边距 - 必须在外层或每个区块上显式加
px-3（对应 1rem，约 16px） - 别信
mx-3，它会让内容居中但左右留白不等价；px-3是唯一可靠选择 - 如果用了
fixed-top导航栏，主体内容要加pt-xxl-5（根据导航高度微调），否则首项被遮挡
真正难的不是写几行 HTML，而是所有列表项的点击反馈、文字行高、图标对齐、左右留白，在不同 iPhone 屏幕和 Android 碎片化系统下保持一致。这些细节没测试真机就上线，用户第一眼就会觉得“这个页面不太对劲”。
