預設asp.net mvc 5模板中輸入組外掛之前的未知間隙

如何重現：

1. 創建新的 ASP.Net MVC 項目
2. 添加模型
3. 添加帶有腳手架視圖的控制器
4. 在瀏覽器中打開 Create.cshtml，然後使用 firebug 或開發者工具更改任何“form-group”：

從 ：

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

到 ：

<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”放在“div”中，“class=‘input-group’”並添加了一個“input-group-addon”

結果很奇怪，看起來像這樣：http: //i.imgur.com/ylpYJKh.png

但正確的結果是這樣的：http: //jsfiddle.net/6t3d9z8e/

這是 ASP.Net MVC 5 預設模板的錯誤還是什麼？

引導 css 和微軟預設樣式之間的互動是一個有趣的錯誤。

在您的預設 css 文件“Site.css”中查看並在註釋後刪除塊Set width on the form input elements since they're 100% wide by default，其中在輸入上設置max-width屬性。

如果你想通過大小來限制你的輸入，你應該通過引導程序的col-md-...類來做到這一點。

通過查看您的螢幕截圖，很明顯 MVC5 正在覆蓋預設的引導輸入屬性。

將以下 CSS 程式碼添加到您的樣式表中。這將解決問題。

.input-group .text-box { width: 100%; }

引用自：https://stackoverflow.com/questions/26507294