我的bootstrap表单有两个不可点击的输入，无法弄清楚原因

Question

我有一个bootstrap 3表单。

当它处于tabled和更大的媒体查询状态时，中间输入字段以某种方式覆盖上面的两个输入，使它们无法点击jsfiddle.net/wT7gp/。

我在jsfiddle中放了一个例子。 （记得要让它宽到足以看到问题）

摄制： 打开链接。 使大窗外大。 单击firstname的输入。

预计它会开始输入状态，但没有任何反应。

希望有人在这里解释我做了什么导致它:)我找不到问题。 （其他则是中间元素覆盖其他两个元素。

Answer 1

您应该使用div类在row中包装表格组行，如下所示：
小提琴：http://jsfiddle.net/wT7gp/1/
的 HTML

<div class="row">
    <div class="form-group  col-sm-6">
        <input class="form-control input-lg " placeholder="First Name" id="first-name" tabindex="1" name="FirstName" data-bind="value: firstName" type="text" maxlength="50" />
        <label for="first-name" style="display:none;" data-bind="validationMessage: firstName, css: { error: !firstName.isValid() }" class="error"></label>
    </div>

    <div class=" form-group col-sm-6">
        <input class="form-control input-lg " placeholder="Last Name" id="last-name" tabindex="2" name="LastName" data-bind="value: lastName" type="text" maxlength="50" />
        <label for="last-name" style="display:none;" data-bind="validationMessage: lastName, css: { error: !lastName.isValid() }" class="error"></label>
    </div>
</div>
<div class="row">
    <div class="col-sm-12 form-group">
        <input class="form-control input-lg " placeholder="Email" id="email" tabindex="3" name="Email" data-bind="value: email" type="email" maxlength="50" />
        <label for="email" style="display:none;" data-bind="validationMessage: email, css: { error: !email.isValid() }" class="error"></label>
    </div>
</div>
<div class="row">
    <div class="col-sm-6 form-group">
        <input class="form-control input-lg " placeholder="Choose a password" id="password1" tabindex="4" name="Password" data-bind="value: password" type="password" />
        <label for="@Html.CamelCaseName(Name)" style="display:none;" data-bind="validationMessage: password    , css: { error: !password.isValid() }" class="error"></label>

    </div>
    <div class="col-sm-6 form-group">
        <input class="form-control input-lg " placeholder="password, again" id="password2" tabindex="5" name="ConfirmPassword" data-bind="value: confirmPassword" type="password" />
        <label for="@Html.CamelCaseName(Name)" style="display:none;" data-bind="validationMessage: confirmPassword   , css: { error: !confirmPassword.isValid() }" class="error"></label>

    </div>
</div>

Answer 2

我遇到了同样的问题。它是由一个覆盖我输入控件的div引起的。 div＆＃39;似乎没有界限＆＃39;。

因此，当我找出导致问题的div时，我应用了overflow:hidden;样式。 我猜测row班为Kevin Pei工作的原因 - 也许它会保留col div。

旁白：我使用Firefox Firebug向我展示哪个div覆盖了我的控件。

Answer 3

我们的网络应用程序中存在一个非常类似的问题。使用bootstrap 3.3.7我们的注册表单在iPhone上不再有效。初始形式如下所示：

<form ...>
    <div class="col-xs-12 col-sm-6">
        <div class="form-group string required">
            <input ...>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6">
        <div class="form-group string required">
            <input ...>
        </div>
    </div>
    <div class="col-sm-6 col-md-8">
        <div class="form-group string required">
            <input ...>
        </div>
    </div>
    <div class="col-sm-6 col-md-4">
        <input type="submit" value="Register">
    </div>
</form>

问题是由最后两个div元素引起的，这两个元素没有xs - 大小的相应类定义。因此，在iPhone上，<div class="col-sm-6 col-md-4">类会导致覆盖整个表单的div非常大，并阻止div下方输入字段的触摸事件。

解决方案只是将一个xs - 大小的类添加到div中，一切都在iPhone上运行良好。在我们的案例中，我们调整了表格：

<div class="col-xs-12 col-sm-6 col-md-8">
    <div class="form-group string required">
        <input ...>
    </div>
</div>	

Answer 4

在我的情况下，我为不允许输入的控件设置了z-index：1，为允许输入的控件设置了z-index设置。