1、實現的效果圖如下所示

效果描述：隨著螢幕的變大和縮小，線的長度也隨著變長和變短，當處於最小螢幕時，線段消失，文字排成一列，如下圖所示

實現程式碼如下所示

 <div class="row">
            <div class="col-md-11 col-md-offset-1">
                <div class="mt-element-step col-md-12">
                    <div class="row step-line">
                        <div class="col-md-4 col-sm-12">
                            <div class="mt-step mt-step-num bg-white pull-left">1</div>
                            <div class="step-content clearfix">
                                <h2 class="pull-left">個人資訊複合</h2>
                                <div class="line pull-left hidden-sm hidden-xs">
                                    <span></span>
                                </div>
                            </div>
                            <p class="step-detail">處理描述有點多有點多不得不換行</p>
                        </div>
                        <div class="col-md-4  col-sm-12">
                            <div class="mt-step mt-step-num bg-white pull-left">2</div>
                            <div class="step-content clearfix">
                                <h2 class="pull-left">工作小時統計</h2>
                                <div class="line pull-left hidden-sm  hidden-xs">
                                    <span></span>
                                </div>
                            </div>
                            <p class="step-detail">處理描述有點多有點多不得不換行</p>
                        </div>
                        <div class="col-md-4  col-sm-12 act">
                            <div class="mt-step mt-step-num bg-white pull-left">3</div>
                            <div class="step-content clearfix">
                                <h2 class="pull-left">其他參與考評專案</h2>
                            </div>
                            <p class="step-detail">處理描述有點多有點多不得不換行</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
 

less程式碼如下所示：

.mt-element-step .step-line .mt-step-num{
  height:32px;
  width:32px;
  line-height:32px;
  color: rgba(0, 0, 0, 0.447058823529412);
  border-radius: 50%;
  text-align: center;
  border:1px solid rgba(0, 0, 0, 0.3);
}
.mt-element-step .step-line .step-wrap{
position:relative;
  left:50%;
  transform:translateX(-50%);
}

.step-content h2{
  height:32px;
  vertical-align: top;
  line-height:40px;
  font-size: 16px;
  margin-left:4px;
  margin-right:4px;
  color: rgba(0, 0, 0, 0.447058823529412);
}
.step-content .line{
  margin-left:6px;
  height:32px;
  width:calc(100% - 150px);
}
.step-content .line span{
  display:inline-block;
  height:1px;
  width:100%;
  position:relative;
  top:50%;
  transform: translateY(-50%);
  background:rgba(0, 0, 0, 0.3);
}
.mt-step p{
  width:100%;
  word-break: break-all;
  line-height: 22px;
  font-size: 14px;

}
.step-detail{
  margin-left:40px;
  width:50%;
  color: rgba(0, 0, 0, 0.447058823529412);
}
.step-line .act .mt-step-num{
  background:dodgerblue ;
  color:#fff;
  border:none;
}
.step-line .act h2{
  font-size: 16px;
  color: rgba(0, 0, 0, 0.847058823529412);
}
.lawer-info{
  margin-top:12px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.847058823529412);
  .form-group{
    margin-bottom:32px;
    input{
      margin-left:-20px;
    padding-left:12px;
    color: rgba(0, 0, 0, 0.247058823529412);
    text-align: left;
    line-height: 22px;
    height:32px;
    border:1px solid rgba(217, 217, 217, 1);
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 1);
  }
  }


}
 

2、實現如下表單的樣式

 <div class="row">
        <div  class="form-group text-center">
            <label class="col-sm-3 control-label">所內及所外媒體投稿：</label>
            <div class="col-md-8  input-group">
                <div class="input-group-addon"><span>未用</span></div>
                <input type="text" class="form-control" placeholder="請輸入">
                <div class="input-group-addon"><span>篇</span></div>
            </div>
        </div>
    </div>