html - 更改 Bootstrap 面包屑分隔线颜色

Question

我正在使用 Bootstrap 3 并使用以下 css 覆盖 .btn-primary 以稍微更改颜色

.btn-primary {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open>.dropdown-toggle.btn-primary {
    color: #fff;
    background-color: #286090;
    border-color: #204d74
}

我正在尝试使用 this breadcrumb example但是当我这样做时，分隔元素的箭头点(三 Angular 形位)与按钮的颜色不同。这发生在正常状态以及悬停/事件状态。

我需要编辑哪些 CSS 属性才能使这些三 Angular 形与我的按钮颜色相同？

.btn-primary {
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open>.dropdown-toggle.btn-primary {
  color: #fff;
  background-color: #286090;
  border-color: #204d74
}
.btn-breadcrumb .btn:not(:last-child):after {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 10px solid white;
  position: absolute;
  top: 50%;
  margin-top: -17px;
  left: 100%;
  z-index: 3;
}
.btn-breadcrumb .btn:not(:last-child):before {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 10px solid rgb(173, 173, 173);
  position: absolute;
  top: 50%;
  margin-top: -17px;
  margin-left: 1px;
  left: 100%;
  z-index: 3;
}
/** The Spacing **/

.btn-breadcrumb .btn {
  padding: 6px 12px 6px 24px;
  color: #fff;
}
.btn-breadcrumb .btn:first-child {
  padding: 6px 6px 6px 10px;
}
.btn-breadcrumb .btn:last-child {
  padding: 6px 18px 6px 24px;
}
/** Primary button **/

.btn-breadcrumb .btn.btn-primary:not(:last-child):after {
  border-left: 10px solid #428bca;
}
.btn-breadcrumb .btn.btn-primary:not(:last-child):before {
  border-left: 10px solid #357ebd;
}
.btn-breadcrumb .btn.btn-primary:hover:not(:last-child):after {
  border-left: 10px solid #3276b1;
}
.btn-breadcrumb .btn.btn-primary:hover:not(:last-child):before {
  border-left: 10px solid #285e8e;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>


<div class="container">
  <div class="row">
    <h2>Breadcrumb Primary</h2>
    <div class="btn-group btn-breadcrumb">
      <a href="#" class="btn btn-primary"><i class="glyphicon glyphicon-home"></i></a>
      <a href="#" class="btn btn-primary">Snippets</a>
      <a href="#" class="btn btn-primary">Breadcrumbs</a>
      <a href="#" class="btn btn-primary">Primary</a>
    </div>
  </div>
</div>

Answer 1

这是您需要在正常状态下使用的 CSS:

.btn-breadcrumb .btn.btn-primary:not(:last-child):after {
    border-left: 10px solid #327CBA;
}

这是您需要在悬停状态下使用的 CSS:

.btn-breadcrumb .btn.btn-primary:hover:not(:last-child):after {
    border-left: 10px solid #286090;
}

只需在您的 CSS 文件中找到定义并将其替换为上面的代码。
您只需要实际更改正常状态和悬停状态的颜色即可。