我有一个 bootstrap 3 表单。
当它处于表格和较大的媒体查询状态时,中间输入字段以某种方式覆盖上面的两个输入,使它们不可点击 jsfiddle.net/wT7gp/
。
我已经在 jsfiddle 中放了一个例子。 (记得要宽到能看清问题)
复制: 打开链接。 使外窗变大。 单击名字的输入。
期望它开始输入状态,但没有任何反应。
希望这里有人可以解释我做了什么导致它 :) 我没能找到问题所在。 (除此之外,是的,中间元素覆盖了另外两个元素。
最佳答案
您应该使用 row
类将表单组的行包装在 div
中,如下所示:
fiddle :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>
关于css - 我的 Bootstrap 表单有两个不可点击的输入,不知道为什么,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19192672/