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>

Bootstrap 3提交按钮无法在Android移动Chrome浏览器中使用

1 个答案: