2

我在我的 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>

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

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

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

在此处输入图像描述

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

在此处输入图像描述

我正在使用 IE 10。它不会发生在 google chrome 中：

在此处输入图像描述

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

4

1 回答 1

3

我发现是什么原因造成的。我的 _Layout.cshtml 视图中有以下 javascript：

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

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

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

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

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

更新

事实证明，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 视图中临时覆盖它：

$('input[type=text]').addClass('form-control');
$('input[type=text]').css('padding', '6px 0');
于 2013-08-24T00:25:21.960 回答