如何在Bootstrap 3面包屑中更改默认的分隔符图标？

Question

在Bootstrap 3面包屑导航中，是否有一种方法可以使用自定义图标替换默认的分隔符“/”？

- adw

Answer 1

这不是图标，你可以添加任何你想要的，比如图标、图片等等。

.breadcrumb > li + li:before {
    color: #ccc;
    content: "/ ";
    padding: 0 5px;
}

将内容更改为“>>”并查看

- Miomir Dancevic

---

谢谢Gorostas！所以如果我想要添加自定义图标，我只需要像这样添加<img>块："...:before { <img goes here...> }"。我是正确的吗？ - adw

请添加您需要的内容 <----- 在此处添加 ---> - Miomir Dancevic

如果你正在使用LESS，请更改 @breadcrumb-separator 变量的值。 - cvrebert

假设我想添加一个图标，比如 "<span class='glyphicon glyphicon-chevron-right'></span>"。怎么做呢？如果使用上述技术，它会显示原始的HTML代码。 - Davy

Answer 2

现在，使用Bootstrap 4

    .breadcrumb-item + .breadcrumb-item::before {
       color: green;
    }

- zak

Answer 3

适用于Bootstrap 5

<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">

参考链接： https://getbootstrap.com/docs/5.0/components/breadcrumb/

- Hemant