0

有没有办法让 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，但这会破坏 datepicker 组件：https ://plnkr.co/edit/CjBzCthVyoQAVooi5oR7?p=preview

UPDATE2： 为了校准，这个问题是关于这个库的：https ://angular-ui.github.io/bootstrap/

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

4

1 回答 1

1
  • 将最后一个div标签更改为span标签。
  • 添加两个新的 CSS 类：
    • .buttonClass{ 垂直对齐：顶部；}
    • .timeClass 表：first-child { 顶部：-35px; 位置：相对；}
  • 添加span保存按钮的按钮类，
  • 将时间类添加到span保存时间选择器。
于 2018-05-29T11:52:57.587 回答