html - 按钮和 Dash 未对齐

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/