html - 需要日历字形图标紧挨着输入的布局

Question

我希望我的日历字形图标位于输入的旁边(右侧)，但它向下跳到输入的下方。

我该如何解决

代码

<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>

Answer 1

在 anchor 标记中使用 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>