Question

我已经做了某种逆向工程，使Bootstrap中的nav-tabs组件成为一个步骤元素。这类似于语义UI中使用的步骤元素

现在，我设法做到这一点（覆盖nav-tabs CSS并添加箭头的样式）但是有一些我无法弄清楚的问题

我不知道如何很好地分隔文本，特别是从第二步文本开始。我改变了箭头的填充/边距，但它混淆了其他人的位置（或者还需要调整）
当你将鼠标悬停在锚标签上时就可以了。但是，当一个元素处于活动状态时，你将鼠标悬停在箭头（三角形类型）之上，它会突出显示，而它应该突出显示可以点击的整个前一步骤元素（如果你得到它需要的要点在一个步骤向导（））

有关此的任何提示吗？这是一些伪类设置我缺少或重复某处！

 .nav-steps>.step:after {
    position: absolute;
    z-index: 2;
    content:'';
    top: 0em;
    right: -22px;
    border-bottom: 23px solid transparent;
    border-left: 23px solid orange;
    border-top: 24px solid transparent;
}

 .nav-steps .step:hover:after {
    border-left-color: pink;
}

http://jsfiddle.net/chou_one/NemwU/

P.S可能有一个更清洁的方法，可能有跨度？

Answer 1

你添加99％正确:)而不是将ARROW添加到<li>，你需要将其添加到<a>， where is a working demo 。

CSS代码更改：

.steps-headers {
    text-align: center;
}

.nav-steps {
  border: none;
  padding-bottom: 1px; 
  background-color: orange;
  display: inline-block;
overflow: hidden; 
}

.nav-steps>li>a {
  margin-right: 0px;
  line-height: 1.428571429;
       width: 180px;
}

/* step arrow style */
.nav-steps>.step a:after {
position: absolute;
z-index: 2;
content: '';
top: 0px;
right: -30px;
border-bottom: 23px solid transparent;
border-left: 23px solid orange;
border-top: 20px solid transparent;
width: 31px;
}


/* disable step arrow style for last item */
.nav-steps>.step:last-child a:after {
  display: none;
}

/* HOVER STYLE */

/* hover state */
.nav-steps>li a:hover {
  background-color: pink;
  color: white;
  border-radius: 0px;  
}



/* step arrow color on hover:after */
.nav-steps .step:hover a:after {
  border-left-color: pink;
}

/* ACTIVE STYLE */

/* active state */
.nav-steps>li.active>a, .nav-steps>li.active>a:hover, .nav-steps>li.active>a:focus {
  background-color: yellow;
  color: black;
  border-radius: 0px;
}

/* step arrow color on active:after */
.nav-steps .step.active a:after {
  border-left-color: yellow;
}

使用nav-tabs作为步骤元素twitter bootstrap

1 个答案: