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

Question

我有一个bootstrap 3表单.

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

我在jsfiddle中放了一个例子.(记得让它宽到足以看到问题)

Repro:打开链接.使大窗外大.单击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“无界限”。

因此，当我找出导致问题的 div 时，我应用了该overflow:hidden;样式。我猜这就是row凯文·贝（Kevin Pei）的班级工作的原因 - 也许它可以让col divs受到控制。

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