Question

我正在尝试在开始时间字段和关闭时间字段之间添加短划线-，该字段无法正确显示。

此外，按钮也没有正确排列。怎么解决这个问题？

您可以看到示例：

<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/

按钮和短划线没有排成一行

2 个答案: