移动端列表组边框消失，大概率是自定义媒体查询（如@media (max-width: 767.98px)）错误覆盖了border样式，或误用border-0导致跨端不一致；应优先检查Styles面板中被划掉的border声明，改用带断点的响应式工具类（如border-sm-0）并确保box-sizing: border-box生效。
移动端列表组边框消失，大概率是响应式类没加断点前缀
Bootstrap 的 border 工具类（如 border、border-primary）默认是「全屏生效」的，但很多人误以为它会随屏幕尺寸自动适配。实际上，一旦你写了 class="border"，它就在所有断点下渲染边框；而真正导致移动端“没边框”的，往往是开发者手动加了响应式控制却写错了位置。
常见错误现象：
- 桌面端能看到边框，手机上打开 DevTools 切换到 mobile 视图，边框突然没了
- 检查元素发现
.list-group上有border: none或border: 0，但源码里根本没写这条 CSS - 边框在 iOS Safari 上消失，Chrome 桌面模拟器却正常
根本原因不是 Bootstrap 主动移除了边框，而是你或团队的自定义 CSS 中用了类似这样的媒体查询：
@media (max-width: 767.98px) {
.list-group {
border: none;
}
}
这类规则通常藏在项目全局样式或主题包里，且优先级高于 Bootstrap 默认的 border 类——哪怕你给 <ul> 加了 class="list-group border"，也会被这条媒体查询覆盖。
立即学习“前端免费学习笔记（深入）”；
排查和修复建议：
- 打开浏览器 DevTools → Elements 面板 → 找到
.list-group元素 → 点开右侧 Styles 标签页，逐条检查哪些border声明被划掉（strikethrough），点开对应文件名定位来源 - 搜索项目中所有
@media块，重点查max-width: 575.98px（xs）、767.98px（sm）、991.98px（md）这几个断点，看是否有无条件重置border的规则 - 如果确实需要移动端隐藏边框，别直接写
border: none，改用 Bootstrap 响应式前缀：border-sm-0（仅在 sm 及以下清空）、border-md（仅在 md 及以上显示）
为什么用 border-0 在移动端反而更危险
border-0 是一个无断点的工具类，它会在所有设备上生效。如果你把它加在 .list-group-item 上用于清除默认底边框，又没配合外层容器的 border 类做统一控制，就容易在移动端暴露视觉断裂。
典型场景：
- 桌面端：外层
.list-group.border+ 内项.list-group-item.border-0→ 边框干净、上下对齐 - 移动端：同样结构，但因 viewport 缩放或字体渲染差异，
border-0清除不彻底，残留 1px 的border-bottom，和外层边框叠加成双线 - 更隐蔽的是 iOS WebKit 对
border-collapse和transform: scale()的处理异常，会让本该被裁掉的边框像素意外露出来
稳妥做法：
- 不要依赖
border-0做跨端一致性控制；改用显式声明：style="border-bottom: 0"或自定义类.no-border-bottom - 若必须用工具类，优先选带断点的：
border-bottom-0 border-bottom-sm表示“仅在 sm 及以上清除底边框”，避免误伤移动端 - 在移动端真要隐藏边框，建议用
border-opacity-0（Bootstrap 5.3+）替代border-0，它保留盒模型尺寸，不会引发重排错位
检查 box-sizing 和缩放是否干扰边框渲染
移动端边框“看不见”，有时根本不是 CSS 层面的问题，而是渲染层被裁剪了。尤其当页面设置了 meta name="viewport" 但内容宽度超出了视口，或者父容器用了 transform: scale(0.9) 类似操作时，边框像素可能被 GPU 渲染截断。
可快速验证的线索：
- 边框在 Chrome 模拟器里正常，真机 Safari 上消失 → 大概率是
box-sizing: border-box没生效，或存在未重置的box-sizing: content-box - 滚动时边框闪现一下又消失 → 说明是渲染层缓存/合成问题，不是样式丢失
- 用
outline: 1px solid red替代border后能看见 → 基本确认是边框被裁剪或透明度归零
实操建议：
- 给
.list-group强制加上box-sizing: border-box !important，排除继承污染 - 检查是否在根元素或某层父容器上写了
transform: scale(...)或zoom，这些属性会破坏边框像素对齐 - 避免在移动端对
.list-group使用width: 100vw，它常比视口宽出 1–2px，导致右侧边框被隐藏
最常被忽略的一点：边框是否真的“不存在”，还是只是“被遮住了”。很多所谓“移动端没边框”的问题，最后发现是卡片容器的 overflow: hidden 把边框裁掉了，或者父级 .col 的负 margin 在小屏下把边框挤出了可视区域。
