Twitter bootstrap 将2个引导输入组块相邻放置

我有两个日期选择器部件放置在彼此的顶部

代码：

<div class="input-group datetimepicker" id="input-start-date">
    <span class="input-group-addon" id="addon-event">Start</span>
    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
    <input class="set-due-date form-control" type="text" value="21/03/2016 14:46" />
</div>
<div class="input-group datetimepicker" id="input-end-date">
    <span class="input-group-addon" id="addon-event">End</span>
    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
    <input class="set-due-date form-control" type="text" value="21/03/2016 14:46" />
</div>

开始
终止

小提琴：

我想把它们放在一起

---

如何更改代码以使datepicker窗口小部件并排放置？

标题和图标位于不同的位置，但这样做是否有效？

更新的HTML：

<div class="wrapper">
  <div class="input-group datetimepicker" id="input-start-date">
      <span class="input-group-addon" id="addon-event">Start</span>
      <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
      <input class="set-due-date form-control" type="text" value="21/03/2016 14:46" />
  </div>
  <div class="input-group datetimepicker" id="input-end-date">
      <span class="input-group-addon" id="addon-event">End</span>
      <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
      <input class="set-due-date form-control" type="text" value="21/03/2016 14:46" />
  </div>
</div>

---

标题和图标位于不同的位置，但这会起作用吗？

更新的HTML：

<div class="wrapper">
  <div class="input-group datetimepicker" id="input-start-date">
      <span class="input-group-addon" id="addon-event">Start</span>
      <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
      <input class="set-due-date form-control" type="text" value="21/03/2016 14:46" />
  </div>
  <div class="input-group datetimepicker" id="input-end-date">
      <span class="input-group-addon" id="addon-event">End</span>
      <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
      <input class="set-due-date form-control" type="text" value="21/03/2016 14:46" />
  </div>
</div>

为此，您可以使用：

开始
终止

您可以使用：

开始
终止

请运行以下工作小提琴：-

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css

开始
终止

请运行以下工作小提琴：-

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css

开始
终止

<div class="row">
  <div class="col-xs-6">
    <div class="input-group datetimepicker" id="input-start-date">
      <span class="input-group-addon" id="addon-event">Start</span>
      <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
      <input class="set-due-date form-control" type="text" value="21/03/2016 14:46" />
    </div>
  </div>
  <div class="col-xs-6">
    <div class="input-group datetimepicker" id="input-end-date">
      <span class="input-group-addon" id="addon-event">End</span>
      <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
      <input class="set-due-date form-control" type="text" value="21/03/2016 14:46" />
    </div>
  </div>
</div>