Bootstrap如何添加＆＃34; /＆＃34; to breadcrumb components？

Question

v3和v4中的Bootstrap breadcrumb组件添加了＆＃34; /＆＃34;列出项目：

http://getbootstrap.com/components/#breadcrumbs

https://v4-alpha.getbootstrap.com/components/breadcrumb/

文档说：

  

分隔符通过:: before和自动添加到CSS中   内容。

所以，我查看了源代码，相关部分显示：

.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>

JSFiddle

为什么带有上述CSS的上述HTML导致/分隔符被添加到.breadcrumb列表中的项目，即使它们没有.breadcrumb-item类，因此无法从content: "/"规则中受益？在JSFiddle中检查输出HTML表明没有bootstrap javascript魔法在我的html列表项中添加了.breadcrumb-item类。

Answer 1

检查元素时，您将获得样式：

progressBar.Value = (now.hours - start.hours) / (start.hours + end.hours)

因此，上述代码定位.breadcrumb > li + li:before { padding: 0 5px; color: #ccc; content: "/\00a0"; } 元素内的所有降序<li>元素。

逻辑非常简单。下一个元素之前有一个面包屑。

Answer 2

有一个像这样的CSS规则：

.breadcrumb

Answer 3

在github（bootstrap v3.3.7）链接到这个样式：

https://github.com/twbs/bootstrap/blob/v3.3.7/less/breadcrumbs.less

for（bootstrap v4.0.0）：

https://github.com/twbs/bootstrap/blob/v4.0.0-alpha.6/scss/_breadcrumb.scss

（bootstrap v3.3.7 - ＆gt; 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 - ＆gt; _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;
  }
}

Answer 4

在Bootstrap的第3版中，分隔符来自：

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

在包含文件breadcrumbs.less的第6行。

希望这有帮助！ ：）