Bootstrap 4 的 hr 用 border-top 实现而非 height，应改 border-top-width、border-top-color 和 border-top-style；响应式推荐用 rem 单位或断点类切换，Sass 定制需提前定义变量并编译。
直接修改 hr 的 border-top 而不是 height
Bootstrap 4 的 hr 默认用的是 border-top: 1px solid #dee2e6 实现的，不是靠 height + 背景色。所以改 height 没用，甚至可能破坏垂直居中或间距表现。
正确做法是覆盖它的边框样式：
- 厚度 → 改
border-top-width（比如2px、0.5rem） - 颜色 → 改
border-top-color（支持命名色、hex、rgb、var(--color)） - 别漏掉
border-top-style: solid，否则设了宽度也不显示
示例：
hr {
border-top: 3px solid #dc3545;
}
为什么加 !important 有时才生效？
因为 Bootstrap 4 的 hr 样式带 margin 和 border，且部分版本用了 border: 0 + 单独定义 border-top，CSS 特异性（specificity）可能比你自定义规则高。
立即学习“前端免费学习笔记（深入）”；
稳妥写法是提升选择器权重或加 !important（尤其在全局 CSS 或未用预处理器时）：
hr.my-thick-divider {
border-top: 4px solid var(--primary);
margin: 1.5rem 0;
}
或者强制覆盖：
hr {
border-top: 2px solid #007bff !important;
}
响应式调整厚度或颜色要避开哪些坑？
不能对 hr 直接写 @media 改 border-width 然后指望它“缩放”——像素值不会自动适配，小屏下可能显得太粗。
更合理的方式：
- 用相对单位：比如
border-top: 0.125rem solid #6c757d（1rem = 16px，0.125rem = 2px），它会随根字号变化 - 结合 Bootstrap 4 的断点类，用
hr.d-none .d-md-block配合不同样式的hr元素（适合完全不同的视觉需求） - 避免在
@media中只改颜色不调间距，否则粗线+默认margin可能造成视觉拥挤
用 Sass 变量定制（如果你在用 Bootstrap 源码）
Bootstrap 4 本身没暴露 $hr-border 这类变量，但你可以重定义 $hr-border-color 和 $hr-border-width（需确认你用的是官方 Sass 版本，且在引入 Bootstrap 前定义）：
$hr-border-color: #28a745; $hr-border-width: 2px; @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/hr";
注意：这个方式只在你完整编译 Bootstrap 时有效；CDN 或已编译 CSS 不会读取这些变量。
实际项目里，多数人直接覆写 hr 更快，也更容易调试和交接。
