twitter-bootstrap - Bootstrap 使用 base 64 图像代码更改面包屑分隔器
问题描述
我正在尝试更改引导面包屑分隔符符号。我参考了一些在线链接并尝试了以下操作。但它不起作用。我希望我能帮助它工作。
<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 示例
解决方案
如果你想用 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+);
但是您需要在导入引导程序之前声明它。
推荐阅读
- mysql - MySQL 在运行时更新表的空值
- jestjs - 带有 jest.config.js 的 Jest cli testPathIgnorePatterns 导致未找到测试
- c# - 在一个线程上串行运行任务
- sqlite - 检索 sqlite 表中的出现次数
- python - 是否可以修改 Apache Spark JDBC 连接器的查询?
- python - 在任意范围内切片 n 维 numpy 数组
- python - 无法在 Mac 上安装 XGBoost-1.0.0
- python - 熊猫:所有行的循环
- node.js - 即使我在 url 中输入值,也表达参数未定义
- python - 熊猫计算日期之间的值的累积和(来自另一个df)