twitter-bootstrap 具有引导程序样式的类型文件的 asp.net MVC 输入属性导致奇怪的结果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30437855/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
asp.net MVC input attribute of type file with bootstrap style casuing strange result
提问by BARJ
I want to have a file-input attribute with the same style as the upload button as seen in the image below. The upload button is using bootstrap. When I apply bootstrap to button A with "TextBoxFor", I get this weird looking button. When I apply bootstrap to button B with "LabelFor", I get the desired style, only without the functionality of the file-input attribute.
我想要一个与上传按钮样式相同的文件输入属性，如下图所示。上传按钮正在使用引导程序。当我使用“TextBoxFor”将引导程序应用到按钮 A 时，我得到了这个看起来很奇怪的按钮。当我使用“LabelFor”将引导程序应用于按钮 B 时，我得到了所需的样式，只是没有文件输入属性的功能。
My question is, how do I get a file-input field with a certain bootstrap style applied and maintain its functionality. With the same result(style) as if it was applied to a submit-type attribute. I prefer to use one of the html helpers, because I am trying to understand them.
我的问题是，如何获得应用了某种引导程序样式的文件输入字段并保持其功能。具有与应用于提交类型属性相同的结果（样式）。我更喜欢使用其中一个 html 助手，因为我试图理解它们。
A:
A：
@Html.TextBoxFor(m => m.File, new { type = "file", @class = "btn btn-default btn-file" })
B:
乙：
@Html.LabelFor(m => m.File, new { type = "file", @class = "btn btn-default btn-file" })
Upload button:
上传按钮：
<input type="submit" class="btn btn-default" value="Upload" />
回答by Germano Plebani
This is the normal aspect of an html input type file (A), and the aspect change from browser to browser. If you want to change as it appears, you have to work with some CSS hiding the real input with another fake over or something similar.
这是 html 输入类型文件 (A) 的正常方面，并且方面因浏览器而异。如果你想改变它出现的样子，你必须使用一些 CSS 来隐藏真实的输入，用另一个假的 over 或类似的东西。
Hereis a good example to do this with bootstrap 3.
这是使用引导程序 3 执行此操作的一个很好的示例。
回答by killa-byte
This is a year old, but I just spent a while struggling with this and figured I'd share my solution. I'd be interested to hear how you resolved this!
这是一岁了，但我只是花了一段时间为此苦苦挣扎，并认为我会分享我的解决方案。我很想听听你是如何解决这个问题的！
I wrapped the razor stuff with a div that uses the form-control class, like so:
我用一个使用 form-control 类的 div 包裹了剃刀的东西，如下所示：
...
<div class="col-md-8">
<div class="form-control">
@Html.TextBoxFor(model => model.Filepath, new { type = "file", id = "filepath", accept = ".jpg, .jpeg, .gif, .png" })
@Html.ValidationMessageFor(model => model.Filepath, "", new { @class = "text-danger", style = "font-weight: bold;" })
<p class="help-block">
Images must be 300x300 pixels or smaller, and in a .PNG, .JPG, or .GIF format.
</p>
</div>
</div>
...
However, since Bootstrap's form-control class puts a border around things by default, I had to override those.
但是，由于 Bootstrap 的表单控件类默认情况下会在事物周围放置一个边框，因此我必须覆盖它们。
border: none;
box-shadow: unset;
The result was pretty clean.
结果很干净。
