ブートストラップステップ（ライン付き）

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> 

THANKS！

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：あなたはLINE `ORDERのためにあなたのコードに入れることはでき

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