按鈕和短劃線不排隊

Question

我想在開始時間字段和關閉時間字段之間添加短劃線-，該字段顯示不正確。

此外，按鈕排列不正確。如何解決這個問題？

你可以看到例如：

https://jsfiddle.net/DTcHh/27015/

<div class="row"> 
    <div class="col-sm-4"> 
    <div class="form-group"> 
     <label>Open Time</label> 
     <div class="input-group bootstrap-timepicker"> 
     <input type="text" class="form-control timepicker"> 
     <span class="input-group-addon"><i class="pg-clock"></i></span> 
     </div> 
    </div> 
    </div> 
    <div class="col-sm-4"> 
    - 
    <div class="form-group"> 
     <label>Close Time</label> 
     <div class="input-group bootstrap-timepicker"> 
     <input type="text" class="form-control timepicker"> 
     <span class="input-group-addon"><i class="pg-clock"></i></span> 
     </div> 
    </div> 
    </div> 

    <div class="col-sm-4"> 
    <div class="form-group"> 
     <label>&nbsp;</label> 
     <button type="submit" class="btn btn-sm btn-default"> 
     + Add Slot 
     </button> 
    </div> 
    </div> 
</div> 

Answer 1

我搬到破折號 - 到另一列。還添加一些CSS。

.vertical-center { 
    display: flex; 
    align-items: center; 
} 

.addButton { 
    margin-top: 12%; 
} 

檢查結果： https://jsfiddle.net/DTcHh/27017/

Answer 2

你需要讓另外一個DIV兩者之間存在並把儀表板到這個div。當然你需要添加一些CSS。

HTML：

<div class="row"> 
    <div class="col-sm-4"> 
    <div class="form-group"> 
     <label>Open Time</label> 
     <div class="input-group bootstrap-timepicker"> 
     <input type="text" class="form-control timepicker"> 
     <span class="input-group-addon"><i class="pg-clock"></i></span> 
     </div> 
    </div> 
    </div> 
    <div class="col-sm-1"> 
    <div class="form-group"> 
     <div class="inner"> 
     - 
     </div> 
    </div> 
    </div> 
    <div class="col-sm-4"> 
    <div class="form-group"> 
     <label>Close Time</label> 
     <div class="input-group bootstrap-timepicker"> 
     <input type="text" class="form-control timepicker"> 
     <span class="input-group-addon"><i class="pg-clock"></i></span> 
     </div> 
    </div> 
    </div> 
    <div class="col-sm-3"> 
    <div class="form-group"> 
     <label>&nbsp;</label> 
     <button type="submit" class="btn btn-sm btn-default"> 
     + Add Slot 
     </button> 
    </div> 
    </div> 
</div> 

CSS：

/* Latest compiled and minified CSS included as External Resource*/ 


/* Optional theme */ 

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
body { 
    margin: 10px; 
} 

.row { 
    display: flex; 
} 

.form-group { 
    height: 100%; 
} 

.inner { 
    padding-top: 30px; 
} 

檢查此琴：https://jsfiddle.net/DTcHh/27019/