怎样用CSS修改Bootstrap 4中水平分割线hr的厚度与颜色-css教程-PHP中文网

bootstrap 4 的 hr 用 border-top 实现而非 height，应改 border-top-width、border-top-color 和 border-top-style；响应式推荐用 rem 单位或断点类切换，sass 定制需提前定义变量并编译。

怎样用css修改bootstrap 4中水平分割线hr的厚度与颜色

直接修改 `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;
}

或者强制覆盖：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

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 更快，也更容易调试和交接。