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

时间:2017-07-09 07:57:55

标签: css forms twitter-bootstrap asp.net-core

当在水平格式布局中使用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/

1 个答案:

答案 0 :(得分:1)

我不知道这个元素用于什么

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

但这就是问题所在。将它放在div.input-group之外,(如果可能的话)以获得圆角。

或覆盖自定义样式

希望这会有所帮助..