引導步驟與行

我想在引導過程中做類似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>

謝謝！

來源

2016-08-30 Cre3k

你可以把你的代碼爲線'訂單 - 付款 - HAPPINESS'？ – Smit

我添加並刷新了主題:) – Cre3k

您可能會發現[此鏈接]（http://www.prepbootstrap.com/bootstrap-template/simplesteps）有用。 – leigero

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

來源

2016-08-31 11:57:51 Cre3k

引導步驟與行

回答

相關問題