Bootstrap breadcrumb 组件在 v3 和 v4 中都添加了一个“/”来列出元素:
http://getbootstrap.com/components/#breadcrumbs
https://v4-alpha.getbootstrap.com/components/breadcrumb/
文档说:
Separators are automatically added in CSS through ::before and content.
所以,我查看了源代码,相关部分显示:
.breadcrumb-item + .breadcrumb-item::before {
display: inline-block;
padding-right: 0.5rem;
padding-left: 0.5rem;
color: #636c72;
content: "/";
}
但是,content: "/";
只存在于breadcrumb-item
规则中。然而,当我遵循 v3 文档时它似乎起作用,它不需要 breadcrumb-item
类用于列表中的元素:
<ol class="breadcrumb">
<li class=''><a href="#">Home</a></li>
<li class=''><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
为什么上面的 HTML 和上面的 CSS 导致 /
分隔符被添加到 .breadcrumb
列表中的元素,即使它们没有 .breadcrumb-item
类,因此不能从 content: "/"
规则中受益?检查 JSFiddle 中的输出 HTML 表明没有 Bootstrap javascript 魔法向我的 html 列表项添加了 .breadcrumb-item
类。
最佳答案
在 github (bootstrap v3.3.7) 上链接到此样式:
https://github.com/twbs/bootstrap/blob/v3.3.7/less/breadcrumbs.less
对于( Bootstrap v4.0.0):
https://github.com/twbs/bootstrap/blob/v4.0.0-alpha.6/scss/_breadcrumb.scss
(bootstrap v3.3.7 --> breadcrumbs.less)
//
// Breadcrumbs
// --------------------------------------------------
.breadcrumb {
padding: @breadcrumb-padding-vertical @breadcrumb-padding-horizontal;
margin-bottom: @line-height-computed;
list-style: none;
background-color: @breadcrumb-bg;
border-radius: @border-radius-base;
> li {
display: inline-block;
+ li:before {
content: "@{breadcrumb-separator}\00a0"; // Unicode space added since inline-block means non-collapsing white-space
padding: 0 5px;
color: @breadcrumb-color;
}
}
> .active {
color: @breadcrumb-active-color;
}
}
(bootstrap v4.0.0 --> _breadcrumb.scss)
.breadcrumb {
padding: $breadcrumb-padding-y $breadcrumb-padding-x;
margin-bottom: $spacer-y;
list-style: none;
background-color: $breadcrumb-bg;
@include border-radius($border-radius);
@include clearfix;
}
.breadcrumb-item {
float: left;
// The separator between breadcrumbs (by default, a forward-slash: "/")
+ .breadcrumb-item::before {
display: inline-block; // Suppress underlining of the separator in modern browsers
padding-right: $breadcrumb-item-padding;
padding-left: $breadcrumb-item-padding;
color: $breadcrumb-divider-color;
content: "#{$breadcrumb-divider}";
}
// IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
// without `<ul>`s. The `::before` pseudo-element generates an element
// *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
//
// To trick IE into suppressing the underline, we give the pseudo-element an
// underline and then immediately remove it.
+ .breadcrumb-item:hover::before {
text-decoration: underline;
}
+ .breadcrumb-item:hover::before {
text-decoration: none;
}
&.active {
color: $breadcrumb-active-color;
}
}
关于html - Bootstrap如何给面包屑组件添加 "/"?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43460808/