引导步骤与行

Question

我想在引导过程中做类似STEPS。我知道，在http://getbootstrap.com/有与进度条这样的部分：

<div class="progress"> 
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 
    <span class="sr-only">60% Complete</span> 
    </div> 
</div> 

，但我需要这样的：

我知道该怎么做链接，但如何让这条线内联链接？

<div class="steps-form"> 
    <span class="label">ORDER</span> 
    <span class="label">PAYMENT</span> 
    <span class="label">HAPPINES</span> 
</div> 

谢谢！

Answer 1

HTML：

<div class="col-md-12 new-steps-form"> 
    <div class="col-md-4"> <h1 class=""><span class="" id="krok1">Order</span></h1></div> 
    <div class="col-md-4"> <h1 class="heading-1"><span class="" id="krok2">Payment</span></h1></div> 
    <div class="col-md-4"> <h1 class=""><span class="" id="krok3">Happines</span></h1></div> 
</div> 

CSS：

.new-steps-form h1{ 
    font-size: 15px !important; 
    color:#bdc3c7 !important; 
    text-transform: uppercase; 
} 
.new-steps-form .heading-1{ 
    position:relative; 
    text-align: center 
    display:inline; 
} 
.new-steps-form .heading-1:after { 
    content: ""; 
    display: block; 
    border-top: solid 2px #bebebe; 
    width: 100%; 
    height: 2px; 
    position: absolute; 
    top: 50%; 
    z-index: 0; 
} 
.new-steps-form .heading-1 span { 
    background-color: #fff !important; 
    padding: 0 20px !important; 
    position: relative; 
    z-index: 1; 
}