组插件导致输入在右侧丢失圆形边缘

Question

在水平表单布局中使用 input-group-addon (twitter bootsrap css) 时，输入会丢失右侧边缘，变成方形而不是正常的漂亮圆形边缘。

<div class="form-horizontal">
  <div class="form-group">
    <label asp-for="Date" class="col-md-2 control-label"></label>
    <div class="col-md-4">
       <input asp-for="Authoriser" class="form-control" />
      <span asp-validation-for="Date" class="text-danger"></span>
    </div>
    <label asp-for="AircraftID" class="col-md-2 control-label"></label>
    <div class="col-md-4">
      <div class="input-group">
        <span class="input-group-addon"><span class="glyphicon glyphicon-plane"></span></span>
        <select asp-for="AircraftID" class="form-control" asp-items="ViewBag.AircraftID"></select>
        <span asp-validation-for="AircraftID" class="text-danger"></span>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/knju0sb0/

Answer 1

我不知道这个元素是做什么用的

 <span asp-validation-for="AircraftID" class="text-danger"></span>

但这就是问题所在。将其放在其 div.input-group 之外，（如果可能）以实现圆角。

或者用自定义样式覆盖

希望这会有所帮助..