Bootstrap 使用 base 64 图像代码更改面包屑分隔器答案

【问题标题】：Bootstrap change Breadcrumb divider with base 64 image codeBootstrap 使用 base 64 图像代码更改面包屑分隔器
【发布时间】：2019-05-03 07:03:51
【问题描述】：

我正在尝试更改引导面包屑分隔符符号。我推荐了几个 online links 并尝试了以下操作。但它不起作用。我希望我能帮助它工作。

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active">Data</li>
  </ol> 
</nav>
//CSS
    $breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+) !important;

请查找codepen示例here

【问题讨论】：

你必须使用预处理来覆盖变量。阅读有关 LESS/SASS/其他的信息。如果您无法使用预处理，则必须手动覆盖它。

标签： twitter-bootstrap breadcrumbs

【解决方案1】：

如果你想用 CSS 来做，你应该这样写：

.breadcrumb-item+.breadcrumb-item::before {
    content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);
}

对于 SASS，您可以使用：

$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);

但您需要在导入引导程序之前声明它。

【讨论】：