Bootstrap步骤与行

Question

我想在bootstrap中创建类似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;
}