如何使 bootstrap-ui datepicker 和 timepicker 内联？

Question

有没有办法让 bootstrap-ui 组件内联显示，如下所示：

我尝试了各种方法，但无法使它们全部对齐。这是 Plunkr

  <div class="col-md-6">
    <p class="input-group">
      <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
      <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
      </span>
       <div uib-timepicker ng-model="mytime" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></div>
    </p>
  </div>

更新：

已尝试将 uib-timepicker 标记从 div 更改为 span，但这会破坏日期选择器组件：https://plnkr.co/edit/CjBzCthVyoQAVooi5oR7?p=preview

更新2： 为了证明这一点，这个问题是关于这个图书馆的：https://angular-ui.github.io/bootstrap/

更新3： 使用相对单位更新了已接受答案中提供的 plunkr：https://plnkr.co/edit/TaoVJZwCjh1uLyz3huk9?p=preview

Answer 1

将最后一个 div 标签更改为 span 标签。
添加两个新的 CSS classes:
- .buttonClass{ vertical-align:top; }
- .timeClass table:first-child { top:-35px; position:relative; }
将按钮 class 添加到包含按钮的 span，
将时间 class 添加到包含时间选择器的 span。

如何使 bootstrap-ui datepicker 和 timepicker 内联？

How to make bootstrap-ui datepicker and timepicker be inline?

angular

datepicker

timepicker

bootstrap-ui