html - 在输入文本的同一行显示按钮

Question

我正在使用来自 UI Bootstrap 的日期选择器这样:

<div class="form-group">
    <label class="col-lg-3 control-label">Birth Date:</label>
    <div class="col-lg-8">
        <input type="text"
                class="form-control"
                datepicker-popup="MMMM dd, yyyy"
                ng-model="panels.patient.birthDate"
                is-open="pdfc.opened"
                ng-required="true"
                close-text="Close" />
        <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="pdfc.open()"><i class="glyphicon glyphicon-calendar"></i></button>
        </span>
    </div>
</div>

按钮显示在一个新行中，就好像有一个 <br /> .有没有办法在 <input /> 的同一行显示按钮？就像它发生在 these examples ？

Answer 1

设置 input-group 而不是 form-group

HTML

    <label class="col-lg-3 control-label">Birth Date:</label>
    <div class="col-lg-8">
    <div class="input-group">
      <input type="text"
                class="form-control"
                datepicker-popup="MMMM dd, yyyy"
                ng-model="panels.patient.birthDate"
                is-open="pdfc.opened"
                ng-required="true"
                close-text="Close" />
      <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="pdfc.open()"><i class="glyphicon glyphicon-calendar"></i></button>
      </span>
    </div>

DEMO HERE