Question

I'm using Bootstrap 3 and am overriding .btn-primary with the following css to change the color a bit

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

I'm trying to use this breadcrumb example but when I do, the arrow points (triangle bits) that separate the items are not the same color as the buttons. This happens on the normal state as well as the hover/active state.

What CSS properties do I need to edit to make these triangles the same color as my buttons?

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

var mystring = sections["sch1"]!

println(mystring[1])  // "jun1"

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

Section header =     Sch1 ,
row1 = jun1      // mSdate ,
row2 = jun2      // mEdate

section header = Sch2 ,
row1 = jun2 ,
row2 = jun4

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

Answer 2

完全删除箭头

.btn.btn-primary:not(:last-child)::before,
.btn.btn-primary:not(:last-child)::after {
    content: none;
}

Change Bootstrap breadcrumbs divider color

2 个答案: