Bootstrap中实现响应式水平分割线最直接方式是用标签配合断点间距类（如my-2 my-md-4 my-lg-5）或显示类（如d-none d-md-block），而非依赖专用组件。
用 <hr> 实现响应式水平分割线最直接
Bootstrap 本身不提供“响应式分割线”组件，但 <hr> 标签天然支持响应式样式控制。关键不是换标签，而是用 Bootstrap 的间距工具类（如 my-* ）和断点前缀动态控制显示/隐藏或边距。
常见错误是直接写 <hr class="my-4">，结果在小屏上留白过大、在超小屏上视觉断裂。正确做法是结合断点类：
-
<hr class="my-2 my-md-4 my-lg-5">—— 小屏紧凑，中大屏拉开间距 -
<hr class="d-none d-md-block">—— 超小屏隐藏，仅在平板及以上显示（适合内容密集型列表） - 避免用
height或width行内样式硬设尺寸，会破坏响应流
用 CSS border-top 替代 <hr> 更灵活可控
当需要精确控制颜色、粗细、位置（比如只在卡片底部、不在顶部），border-top 比 <hr> 更可靠，尤其在 Flex/Grid 布局中不会意外触发换行或 margin 合并。
典型场景：卡片列表中每张卡片底部加线，但最后一张不加：
- 用
.card + .card { border-top: 1px solid #e9ecef; }—— 利用相邻兄弟选择器，无需额外 HTML 元素 - 配合 Bootstrap 断点：
@media (max-width: 768px) { .card + .card { border-top: none; } } - 注意：不要对
<hr>再套border-top，会导致双线；也不要用!important覆盖默认<hr>样式，易失控
响应式分割线的兼容性与性能陷阱
所谓“响应式分割线”，本质是让分割行为随视口变化而变化，不是让线本身“动起来”。容易被忽略的点：
- 移动端高频滚动时，大量
<hr>标签可能增加重排开销，尤其是嵌套在v-for或*ngFor中未做虚拟滚动时 - IE11 不支持
d-*-none/block类（需用hidden或自定义媒体查询回退） - 用
filter: alpha()或旧版 IE 渐变写法（如style="filter: alpha(opacity=0,finishopacity=100,style=1)"）已完全失效，现代项目应彻底弃用 - 若用 JS 动态检测换行并插入分割线（如知识库中
detectWrap函数），在 SSR 或首屏渲染中会失效，且影响 LCP 指标
Bootstrap 栅格分隔 vs 自定义分割线：选哪个？
Bootstrap 的 .row / .col 是布局容器，不是分割线。强行用栅格“模拟”分割（比如 <div class="row"><div class="col-12 border-bottom"></div></div>）属于反模式：
- 语义错误：
<div> 不表达“分隔”含义，无障碍阅读器无法识别<li>冗余 DOM：多一层 wrapper，CSS 选择器更难维护</li> <li>响应式失准：栅格列宽变化时，<code>border-bottom仍占满整行，无法像<hr>那样自然收缩到内容宽度 - 真正需要布局分割（如上下两栏等分）——用
vh+ Flex，而不是靠<hr>；需要视觉分隔——就用<hr>或border
复杂点在于：分割线是否承载语义（如章节切换）、是否要适配深色模式、是否需动画过渡。这些都不是 Bootstrap 默认覆盖的，得自己补。
