默认 asp.net mvc 5 模板中 input-group-addon 之前的未知间隙

如何重现：

1. 创建新的 ASP.Net MVC 项目
2. 添加模型
3. 添加带有脚手架视图的控制器
4. 在浏览器中打开 Create.cshtml，然后使用 firebug 或开发人员工具更改任何“表单组”：

From :

<div class="form-group">
   <label class="control-label col-md-2" for="Name">Name</label>
   <div class="col-md-10">
      <input name="Name" class="form-control text-box single-line" id="Name" type="text" value="">
   </div>
  <span class="field-validation-valid text-danger" data-valmsg-replace="true" data-valmsg-for="Name"></span>
</div>

To :

<div class="form-group">
   <label class="control-label col-md-2" for="Title">Title2</label>
   <div class="col-md-10">
      <div class="input-group">
        <input name="Title" class="form-control text-box single-line" id="Title" type="text" value="">
        <span class="input-group-addon">@</span>
      </div>
   </div>
</div>

我们只是将“input”放入带有“class='input-group'”的“div”中，并添加了一个“input-group-addon”

结果很奇怪，看起来像这样：https://i.stack.imgur.com/jmq80.png https://i.stack.imgur.com/jmq80.png

但正确的结果是这样的：http://jsfiddle.net/6t3d9z8e/ http://jsfiddle.net/6t3d9z8e/

这是 ASP.Net MVC 5 默认模板的错误还是什么？

Bootstrap CSS 和微软默认样式之间的交互存在一个有趣的错误。

请参阅默认 css 文件“Site.css”并删除注释后的块Set width on the form input elements since they're 100% wide by default，其中设置max-width输入的属性。

如果你想通过大小限制你的输入，你应该通过 bootstrap 来做到这一点col-md-...类。