Question

我正在以这种方式使用UI Bootstrap中的datepicker：

<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 />一样。有没有办法像these examples中那样在<input />的同一行显示按钮？

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

Answer 2

只需将输入的显示设置为“内联块”

即可

CSS：

.form-group input {
  display: inline-block;
}

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

2 个答案: