asp.net-mvc-4 - Twitter Bootstrap 3 - MVC Razor View 中的文本输入隐藏了前几个字符

Question

我在我的 ASP.Net MVC razor 应用程序中使用带有水平表单和表单组的 twitter bootstrap 3:

<form action="SomeAction" class="form-horizontal" method="post">
<div class="form-group">
    <div class="col-lg-3 control-label">
        @* label *@
    </div>
    <div class="col-lg-9">
        @* textbox *@
        @* validation *@
    </div>
</div>

我的布局模板中还有以下内容，因为每个 View 都是一个表单，我不想单独设置每个控件或 View 的样式:

$('input[type=text]').addClass('form-control');

使用文本输入，这就是我得到的:



前 1-2 个字符被隐藏，直到我单击控件，然后显示它们:



我正在使用 IE 10。它不会发生在谷歌浏览器中:



不知道如何解决这个问题所以任何帮助表示赞赏

Answer 1

我发现是什么导致了它。我的 _Layout.cshtml View 中有以下 javascript:

$('input[type=text]').addClass('form-control');

一旦我删除它并在控件中应用该类，它就会正确呈现:

@Html.TextBoxFor(model => model.Manufacturer, new { style = "width: 400px;", @maxlength="50", @class = "form-control" })

文本输入似乎是唯一有此问题的输入。 textarea 和 select 没有相同的行为。

我想避免将引导类放在每个 View 的每个控件中。如果有人知道更好的方法，请告诉我。

更新

事实证明，bootstrap.css(版本 3.0.0，第 1712 行)中的填充样式(12px)导致了问题:

.form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px; /* this line is causing the problem */
  font-size: 14px;
  line-height: 1.428571429;
  color: #555555;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
          transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

讨厌改变引导 css。我在我的 _Layout.cshtml View 中暂时覆盖它:

$('input[type=text]').addClass('form-control');
$('input[type=text]').css('padding', '6px 0');