如何在Bootstrap 4中利用CSS自定义面包屑导航分隔符-css教程-PHP中文网

应使用.breadcrumb-item + .breadcrumb-item::before配合!important覆盖默认分隔符，推荐设content: ">"、vertical-align: middle、padding和color；若用sass则优先覆写$breadcrumb-divider变量。

如何在bootstrap 4中利用css自定义面包屑导航分隔符

如何用 CSS 覆盖 `.breadcrumb-item` 的默认分隔符

Bootstrap 4 默认用 font-family: "Font Awesome 5 Free" + \f105（即右箭头图标）作为分隔符，但这个字符依赖 FontAwesome 字体加载，且无法直接通过 HTML 修改。真正可控的方式是用 CSS 的 ::before 伪元素重写分隔符。

关键点在于：必须用 !important 覆盖 Bootstrap 原生样式，因为其默认规则带 .breadcrumb-item + .breadcrumb-item::before 且 specificity 较高。

在自定义 CSS 中写：

.breadcrumb-item + .breadcrumb-item::before {
  content: ">";
  color: #6c757d;
  padding: 0 0.5rem;
}

如果要用 SVG 或图标字体（如 FontAwesome），确保对应字体已加载，且 content 使用正确 Unicode（例如 "\f054" 对应 FA 的 angle-right）
避免只改 content 却忽略 padding 和 color，否则视觉上会紧贴文字或颜色不一致

为什么直接修改 `$breadcrumb-divider` Sass 变量更干净

如果你项目中已使用 Sass 编译 Bootstrap，最稳妥的方式是在引入 Bootstrap 前覆盖变量，而不是后期用 CSS 强制覆盖。这样能避免 specificity 冲突和维护混乱。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

在自定义 Sass 文件顶部声明：

$breadcrumb-divider: "›"; // 或 "/"、"•"、"→"

确保该变量在 @import "bootstrap/scss/functions"; 之后、@import "bootstrap/scss/bootstrap"; 之前生效
注意：Bootstrap 4 的 $breadcrumb-divider 默认值是 quote("»")，不是字符串字面量，所以你赋值时也要用 quote() 或直接字符串（新版 Sass 兼容性更好）
若用 Webpack + sass-loader，变量覆盖失败，大概率是 @import 顺序错了，检查是否被其他文件提前引入了 bootstrap.scss

遇到分隔符错位或换行怎么办

常见现象是分隔符突然跑到下一行，或与文字上下不对齐——这通常是因为父容器 .breadcrumb 设置了 white-space: nowrap 但子项未设 display: inline-flex，或者伪元素未设 vertical-align。

给 .breadcrumb-item::before 加上：vertical-align: middle;
确认 .breadcrumb-item 是 display: inline-block（Bootstrap 4 默认如此），不要意外覆盖成 block
如果用了自定义图标（比如 background-image），记得设 width 和 height，并用 vertical-align: middle 对齐
响应式断点下分隔符消失？检查媒体查询是否误删了 ::before 规则，或 content 被设为 none

用 SVG 代替字符分隔符的注意事项

字符分隔符在高缩放或某些字体缺失时可能模糊或显示为方块，SVG 更可控，但需注意尺寸和内联方式。

推荐用 background-image: url("data:image/svg+xml,...")，避免额外 HTTP 请求
URL 中的 SVG 必须 URL 编码，例如 → <code>%3C，/> → %3E；可用在线工具快速编码
设置 background-size: 0.8rem 0.8rem 和 background-repeat: no-repeat，再配合 padding-left: 1.2rem 避免文字重叠
不要把 SVG 写进 content 属性——CSS 的 content 不支持内联 SVG，只能用 data URL 作 background