未知的差距

創造新的ASP.Net MVC項目
添加模型
添加腳手架控制器意見
在瀏覽器中打開Create.cshtml，然後更改任何「形式的組」使用Firebug或開發工具：

來源：

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

我們只要把「輸入」一「格」與「類=‘輸入組’」內，並增加了「輸入組插件」

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

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

這是一個ASP.Net MVC 5默認模板的錯誤還是什麼？

來源

2014-10-22 Abu Assar

它是bootstrap css和microsoft默認樣式之間交互的一個有趣的bug。

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

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

來源

2014-10-22 13:02:38 idlerboris

這解決了這個問題，我從「Site.css」註釋掉了這一行： input， select， textarea max_width：280px; }，非常感謝 – 2014-10-22 21:40:00

您還可以添加：.input-group { max-width：350px; }沒有註釋掉上面的內容。 – 2016-06-10 11:11:15

很奇怪，即使在最新版本的Visual Studio中也沒有修復這個bug。 – harveyt 2016-12-09 15:46:46

-1

通過查看您的屏幕截圖，很明顯MVC5覆蓋了默認的引導程序輸入屬性。

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

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

來源

2014-10-22 12:37:25

這不起作用，因爲microsoft默認樣式包含css塊，whick設置爲'max-width：280px'。 – idlerboris 2014-10-22 13:05:00

然後嘗試從你的CSS覆蓋相同。 --- .input-group .text-box {width：100％;最大寬度：100％; } – 2014-10-23 02:50:38

回答

相關問題