按钮和短划线不排队

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/