Html 2个表单元素和一个不在手机上工作的链接

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

<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>

登录
保存密码（如果使用公用计算机，则不要选中此复选框）

---

我不知道为什么这在手机上不起作用，但在桌面上起作用，所以问题似乎出在顶部的col-xs-8上。这似乎导致输入与按钮重叠

您使用的是什么移动设备？Edge+上的一台IPhone（不是我的）Opera和Nexus 7上的Opera