Bootstrap虽无专用文件管理网格列表组件，但可通过grid+card+图标+状态标签实现：用响应式col断点控制列数（如col-xl-2 col-lg-3等），card去边框阴影并精简内边距，固定展示badge状态与右上角操作按钮，确保键盘可聚焦及无障碍支持。
Bootstrap 本身不提供专门的“文件管理网格列表”组件，但用 grid + card + 图标和状态标签就能快速搭出实用、响应式、语义清晰的文件列表——关键不是套模板，而是控制好列数断点、文件元信息排布和交互反馈。
用 row + col-* 控制网格密度与响应行为
后台文件列表通常需要在桌面端显示 4–6 列（节省垂直空间），平板收窄为 2–3 列，手机退化为单列。别硬写 col-2 或 col-3，直接按设备断点配：
-
col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12：适合小图标+简短文件名场景，xl 屏一屏 6 个 -
col-xl-3 col-lg-4 col-md-6 col-sm-12：更宽松，适合带缩略图或双行描述的卡片 - 避免用
col-auto或col（无断点）——会导致小屏下内容溢出或换行错乱 - 所有
col必须包裹在row内，否则gutter（间距）失效，且 Flex 布局错位
用 card 封装每个文件项，但去掉默认边框和阴影
默认 card 的 border 和 box-shadow 在密集列表里显得臃肿，反而干扰扫视。轻量化的做法是重置样式：
<div class="card border-0 bg-transparent shadow-none">
<div class="card-body p-2 text-center">
<i class="bi bi-file-earmark-text fs-4 text-muted"></i>
<div class="mt-1 small">report_q3.pdf</div>
<div class="text-xs text-secondary">2.4 MB · 2024-05-12</div>
</div>
</div>
-
border-0和shadow-none是必须加的；bg-transparent防止深色主题下背景块突兀 -
p-2控制内边距，太大会撑开网格，太小则点击热区过小（尤其触屏） - 图标用 Bootstrap Icons（
bi类），确保加载了bootstrap-icons.css，否则图标不显示
文件状态和操作需显性可识别，别只靠悬停
后台用户常批量操作，不能依赖 :hover 显示按钮——键盘用户、触屏、高对比度模式下都不可见。正确做法是固定展示关键状态和最小操作入口：
- 用
badge标记类型：<span class="badge bg-light text-dark">PDF</span>或<span class="badge bg-success">已同步</span> - 操作区域放右上角固定位置：
<div class="position-absolute top-0 end-0 mt-1 me-1"><button class="btn btn-sm btn-outline-secondary">⋯</button></div> - 禁用状态要明确：
disabled按钮 +opacity-50+text-muted文件名，不能只灰掉图标 - 选中态用
border-primary+position-relative加个细边框，比背景色高亮更稳定（避免深色主题冲突）
注意 container-fluid 和滚动容器的嵌套关系
后台布局常有固定侧边栏 + 主内容区，如果主区用了 overflow-y-auto，而文件网格又放在 container-fluid 内，容易出现水平滚动条——因为 gutter 的负 margin 会突破父容器边界。
- 解决方案：在滚动容器上加
mx-n2（抵消col的px-2），或改用container（有 max-width） - 测试时务必在真机或 Chrome DevTools 的 “Responsive” 模式下拖动宽度，看是否意外触发横向滚动
- 如果列表项高度不一致（比如有的带两行描述，有的只有一行），加
d-flex flex-column h-100到card-body，再用flex-grow-1控制文字区域撑满，避免卡片错位
最易被忽略的是键盘导航支持：每个文件项得是 tabindex="0" 的可聚焦元素，且 Enter / Space 触发默认操作（如预览），不然无障碍合规就过不了。这不是锦上添花，是后台系统的基本要求。
