nav {
ol.breadcrumb {
background-color: unset;
.breadcrumb-item {
a {
color: #0a0a0a;
&:hover {
color: #0a0a0a;
text-decoration: underline;
}
}
&:before {
&:not(:first-child){
content: ">>" !important;
}
}
}
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<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" aria-current="page">Data</li>
</ol>
</nav>
上面的代码是自举式面包屑。在上面的SCSS代码中,我尝试将伪元素内容“ /”更改为“ >>”,但是该代码对我不起作用。
如果我删除&:not(:first-child)
部分,它的工作原理。但是我不希望第一个元素出现“ >>”。
默认的引导程序nav
具有比您更特定的样式。像这样写scss
:
nav {
ol.breadcrumb {
.breadcrumb-item {
& + .breadcrumb-item {
&::before {
content: ">>" !important;
}
}
}
}
}
在此处查看演示。
另外,如何将其放置在页面中央?由于
text-center
不能很好地解决这个问题。你还可以请
upvote
和validate
我的答案第一?;)@TanjaForsberg要居中,您必须添加
justify-content: center
到nav ol.breadcrumb
@TanjaForsberg能请
validate
我回答吗?