html - 如何摆脱输入和日历图标之间的空间

Question

更新:

在执行此代码后，我得到了:

<div class="col-xs-5">
   <div class="form-group">
      <label for="" class="col-xs-5 control-label">Contract Date Signed:</label>
      <div class="col-xs-5">
         @Html.EditorFor(m => m.ContractDateSigned, new { htmlAttributes = new { @Value = Convert.ToDateTime(Model.ContractDateSigned).ToShortDateString(), @class = "form-control" } }) 
         @Html.ValidationMessageFor(m => m.ContractDateSigned, "", new { @class = "text-danger"
         })
         <span class="input-group-addon"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span></span>
      </div>
   </div>
</div>

如何去掉输入框和日历图标之间的空格？

这是我使用的 html:

<div class="col-xs-5">
   <div class="form-group">
      <label for="" class="col-xs-5 control-label">Contract Date Signed:</label>
      <div class="col-xs-5">
         @Html.EditorFor(m => m.ContractDateSigned, new { htmlAttributes = new { @Value = Convert.ToDateTime(Model.ContractDateSigned).ToShortDateString(), @class = "form-control" } })                                                
         @Html.ValidationMessageFor(m => m.ContractDateSigned, "", new { @class = "text-danger" })
      </div>
      <span class="btn btn-default"><span class=" fa fa-calendar"></span></span>
   </div>
</div>

Answer 1

使用输入组:

http://getbootstrap.com/components/#input-groups

<div>
  <div class="form-group">
    <label for="" class="col-xs-5 control-label">
      Contract Date Signed:
    </label>
    <div class="input-group col-xs-5">
      <input class="form-control">
      <span class="input-group-addon">
        <i class="glyphicon glyphicon-calendar" aria-hidden="true"></i>
      </span>
    </div>
  </div>
</div>

查看这个 jsfiddle:

http://jsfiddle.net/21Lfnq4e/