javascript - Bootstrap 3 提交按钮在 Android 移动 Chrome 浏览器中不起作用

Question

现在我在某个地方挣扎......即使我花了几个小时使用替代方法，我也找不到解决方案......期待提示...... 我的问题是.. 用户无法在移动设备上单击提交按钮(bootstrap3)，尤其是在 Android 中，但它在 PC/笔记本电脑上运行良好，即使做了很多更改，我也不知道我的错误在哪里。

同一模式下还有另外 2 个 btn，工作正常...

在我的页面中，我使用模型表单进行登录，代码如下所示...

 <div class="modal-body borderpadding3px">
           <!-- login form -->
            <div class="row">
     <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12 div_align_center">
    <form id="login" name="login" class="form-horizontal">
    <fieldset>

    <!-- Form Name -->
    <legend style="border:none;"></legend>

    <div class="form-group div_align_left">
      <label class="col-md-4 control-label" for="email">Login Email Id</label>
      <div class="col-md-6">
        <div class="input-group">
          <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
          <input id="email" name="email" class="form-control" placeholder="Enter your registered email id" type="email">
        </div>

      </div>
    </div>

    <!-- Prepended text-->
    <div class="form-group div_align_left">
      <label class="col-md-4 control-label div_align_left" for="pwd">Password</label>
      <div class="col-md-6">

        <div class="input-group">
          <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
          <input id="pwd" name="pwd" class="form-control" placeholder="Enter your password" type="password">
        </div>

      </div>
    </div>

    <!-- Button -->
    <div class="form-group div_align_left">
      <label class="control-label col-md-4 col-xs-1 col-sm-1" for="submit"></label>

      <div class="col-md-4 col-xs-4 col-sm-4 margin-bottom-10">
        <button id="submit" name="submit" type="submit" class="btn btn-lg btn-success">LOG IN</button>
      </div>

      <div class="col-md-3 div_align_right">
      <a href="javascript:void(0);" onClick="forgotpwd();" class="btn btn-primary btn-xs margin-top-20"> Forgot Password?</a>
      </div>

       <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 borderBottom">
      </div>
    </div>
    </fieldset>
    <div class="row margin-top-10">
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 margin-bottom-10 div_align_center">
     <a href="new_user_register.php" class="btn btn-primary btn-lg active"><span class="glyphicon glyphicon-user"></span> New user? Register</a>
     </div>
     </div>
    </form>
     </div> 
     </div>

           <!-- login form ends -->
          </div>

Answer 1

您所做的操作不允许使用 col-xs-* 类进行移动尺寸调整

将按钮代码更改为此，它将起作用 - 然后根据需要设置其样式

请注意我如何使用 col-xs-12 类，以便您的按钮现在在移动设备上独占一行

<div class="col-md-4 col-xs-4 col-sm-4 margin-bottom-10 col-xs-12"><!-- added col-xs-12 -->
    <button id="submit" name="submit" type="submit" class="btn btn-lg btn-success">LOG IN</button>
</div>

<div class="col-md-3 col-xs-12 div_align_right"><!-- added col-xs-12 -->
    <a href="javascript:void(0);" onClick="forgotpwd();" class="btn btn-primary btn-xs margin-top-20"> Forgot Password?</a>
</div>