13

我有一个 bootstrap 3 表格。

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

我在 jsfiddle 中放了一个例子。（记得把它弄得足够宽才能看到问题）

复制：打开链接。使外窗变大。单击名字的输入。

期望它开始输入状态，但没有任何反应。

希望这里的人可以解释我做了什么导致它:)我没能找到问题。（否则是的，中间元素覆盖了另外两个元素。

4

4 回答 4

24

你应该用这样的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>
于 2013-10-05T00:33:40.563 回答
4

我有同样的问题。这是由覆盖我的输入控件的 div 引起的。这似乎是div“无界”。

因此，当我确定哪个 div 导致问题时，我应用了该overflow:hidden;样式。我猜这就是这row门课为 Kevin Pei 工作的原因——也许它让 col div 被包含在内。

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

于 2014-12-12T17:03:58.043 回答
3

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

问题是由最后两个div没有xs-size 对应的类定义的元素引起的。因此，在 iPhone 上，<div class="col-sm-6 col-md-4">该类导致div整个表单的覆盖范围非常大，并阻止了div.

解决方案只是xs在 div 中添加一个 -size 类，并且在 iPhone 上一切正常。在我们的例子中，我们调整了这样的形式：

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

于 2018-02-15T09:06:23.050 回答
1

在我的情况下，我为不允许输入的控件设置了 z-index:1，并且为允许输入的控件设置了没有 z-index 设置。

于 2018-12-29T13:18:15.993 回答