twitter-bootstrap 我的引导程序表单有两个不可点击的输入，不知道为什么
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19192672/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
My bootstrap form has two un-clickable inputs, can't figure out why
提问by Poul K. S?rensen
I have a bootstrap 3 form.
我有一个 bootstrap 3 表单。
when its in the tabled and larger media query state, the middle input field is somehow overlaying the two inputs above making them none clickable jsfiddle.net/wT7gp/.
当它处于表格和更大的媒体查询状态时，中间的输入字段以某种方式覆盖了上面的两个输入，使它们不可点击jsfiddle.net/wT7gp/。
I have put an example in jsfiddle. (remember to make it wide enough to see the problem)
我在 jsfiddle 中放了一个例子。（记住要让它足够宽才能看到问题）
Repro: Open link. make the outwindow large. click the input for firstname.
重现：打开链接。使窗外大。单击名字的输入。
Expected it to start typing state, but nothing happens.
期望它开始输入状态，但没有任何反应。
Hope someone here can explan what I did to cause it :) I failed at finding the issue. (other then yes the middle element is overlaying the two others.
希望这里有人可以解释我做了什么导致它:) 我没能找到问题。（除此之外，是的，中间元素覆盖了另外两个元素。
回答by Kevin Pei
You should be wrapping your rows of form groups in divwith rowclass like so:
Fiddle: http://jsfiddle.net/wT7gp/1/
HTML
你应该换你的表单组的行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>
回答by user3751744
I had the same problem. It was caused by a div covering my input controls. It seemed the div'knew no bounds'.
我有同样的问题。这是由覆盖我的输入控件的 div 引起的。这似乎是div“无所不知”。
So when I worked out which div was causing the problem I applied the overflow:hidden;style.
I'm guessing that's why the rowclass worked for Kevin Pei - maybe it keeps the col divs contained.
因此，当我找出导致问题的 div 时，我应用了该overflow:hidden;样式。我猜这就是该row课程为 Kevin Pei 工作的原因- 也许它保留了 col div。
Aside:I used Firefox Firebug to show me which div was covering my controls.
旁白：我使用 Firefox Firebug 来显示哪个 div 覆盖了我的控件。
回答by anka
We had a very similar problem within our web application. Using bootstrap 3.3.7our signup form did not work any more on iPhones. The initial form looked like this:
我们在我们的 Web 应用程序中遇到了一个非常相似的问题。使用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>The problem was caused by the last two divelements which did not have corresponding class definitions for the xs-size. So on iPhone the <div class="col-sm-6 col-md-4">class resulted in a very big divoverlaying the whole form and preventing touch events for input fields beneath the div.
问题是由最后两个div元素引起的，它们没有对应的xs-size类定义。因此，在 iPhone 上，<div class="col-sm-6 col-md-4">该类导致div了整个表单的非常大的覆盖，并阻止了div.
The solution is simply adding a xs-size class to the div and everything worked well on iPhones. In our case we adjusted the form like that:
解决方案只是向xsdiv添加一个-size 类，一切都在 iPhone 上运行良好。在我们的例子中，我们像这样调整了表单：
<div class="col-xs-12 col-sm-6 col-md-8">
<div class="form-group string required">
<input ...>
</div>
</div> 回答by user10369036
In my case i set z-index:1 for the controls not allowing inputs and no z-index setting for the controls allowing inputs.
在我的情况下，我为不允许输入的控件设置了 z-index:1，为允许输入的控件设置了没有 z-index 设置。
