html - 需要日历字形在输入旁边的布局

我希望我的日历字形图标在输入的下一个（右边），但是它在输入的下面跳了下来。

我该如何解决

码

<div class="col-sm-9">
    <div class="input-group">
      <input type="text" class="form-control" [(ngModel)]="TickleDate" name="TickleDate" id="TickleDate" [minDate]="minDate" [maxDate]="maxDate"
           #xdp="bsDatepicker" bsDatepicker [(bsValue)]="tickleValue" [bsConfig]="dpConfig">
      <a href="#"><span class="glyphicon glyphicon-calendar"></span></a>
    </div>
</div>

最佳答案

在锚标记中使用input-group-addon类。

Reference Link

堆栈片段

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-sm-9">
  <div class="input-group">
    <input type="text" class="form-control" [(ngModel)]="TickleDate" name="TickleDate" id="TickleDate" [minDate]="minDate" [maxDate]="maxDate" #xdp="bsDatepicker" bsDatepicker [(bsValue)]="tickleValue" [bsConfig]="dpConfig">
    <a href="#" class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></a>
  </div>
</div>