未知的差距

创造新的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

回答

相关问题