html - 2 个表单元素和一个来自“不适用于移动设备”的链接

Question

我在一个使用 bootstrap 的站点上有一个登录表单。在桌面上没有问题。但在移动设备上，按钮不起作用，复选框也不起作用。还有一个忘记密码的链接，但在移动设备上也不起作用。

<div class="col-md-4 col-xs-8">
    <form method="post">
        <div class="row">
            <div class="input-group col-md-12">
                <input type="text" class="form-control" style="margin-bottom:10px;" placeholder="User Name" aria-label="User Name" name="username"/>
                <input type="hidden" value="true" name="login_now"/>
            </div>
            <div class="col-md-12 input-group">
                <input type="password" class="form-control" placeholder="Password" aria-label="Password" name="password"/>
                    <span class="input-group-btn">
                        <button role="button" class="btn btn-blue" type="submit" aria-label="Log In" name="login_button">Log In</button>
                    </span>
                </div>
            <div class="col-md-12">
                <input type="checkbox" name="save-password" />
                &nbsp;&nbsp;Save Password (do not check box if using a public computer)&nbsp;
                <a class="password-link" href="forgot_password.php">Forgot Password?</a>
            </div>
        </div>
    </form>
</div>

我不知道为什么这不能在移动设备上运行，但在桌面上运行

Answer 1

所以问题似乎出在顶部的 col-xs-8 上。它似乎导致输入与按钮重叠