Bootstrap Modal无法响应移动设备

我正在设计一个即将完成的登录表单。我面临的问题是我使用的（bootstrap）模式对移动设备无法响应。我已经包含bootstrap.min.css文件。请帮忙！Bootstrap Modal无法响应移动设备

<section class="at-login-form"> 
 
    <!-- MODAL LOGIN --> 
 
    <div class="modal fade" id="at-login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog modal-lg" role="document"> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 
 
     </div> 
 
     <div class="modal-body"> \t 
 
      <form name = "logform" method = "POST" id = "myform1" onsubmit = "return validateForm()"> 
 
      <div class="form-group"> 
 
       <input type="email" class="form-control-form " id="exampleInputEmaillog" name = "ename" placeholder="Email"> 
 
      </div> 
 
      <div class="form-group"> 
 
       <input type="password" class="form-control-form " id="exampleInputPasswordpas" name = "pass" placeholder="Password"> 
 
      </div> 
 
      <div class="row"> \t 
 
       <div class="col-md-6"> 
 
       <div class="checkbox"> 
 
        <label> 
 
        <input type="checkbox"> Remember me 
 
        </label> 
 
       </div> \t 
 
       </div> 
 
       <div class="col-md-4 col-md-offset-2"> \t 
 
       <p class="frgt-pswd" data-toggle="modal" data-dismiss="modal" data-target="#at-reset-pswd"> 
 
        Forgot Password ? 
 
       </p> 
 
       </div> 
 
      </div> 
 
      <input type="submit" class="btn-lgin" value = "Sign In"> 
 
      </form> 
 
     </div> 
 
     <div class="modal-footer"> 
 
      <div class="row"> \t 
 
      <div class="col-md-6"> 
 
       <p class="ta-l">Don't have an account ? </p> 
 
      </div> \t 
 
      <div class="col-md-4 col-md-offset-2"> \t 
 
       <button class="btn-gst" data-toggle="modal" data-dismiss="modal" data-target="#at-signup" > 
 
       Sign Up 
 
       </button> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

来源

2017-08-31 Chintan Savla

你是什么意思的“不响应”？是表单不响应用户输入，还是不能缩放以适应视口的大小？ – gmferland

你有引导程序的CSS链接头和身体关闭标签之前的JS？ – mlegg

我自己使用bootstrap模式，它确实没有响应。你需要使用'css媒体查询'来响应你自己。 – masterpreenz

引导不只是一个负责任的布局，但它可以让你非常具体要如何布局看不同的视口的大小。这意味着对于很多类，您可以选择要显示元素的特定最小视口宽度。在最低限度以下，该元素将占用全部12列。视口尺寸的确切像素宽度在Media Queries section of the documentation中定义，但大致分为手机xs，平板电脑sm，小笔记本电脑md，以及较大笔记本电脑和台式机的lg。

例如，col-md-6的意思是“当视口大于或等于中显示为6列，并且当视口小于中等时显示为12列”。您可以通过这种方式组合多个类来定位多个视口宽度。例如，col-sm-8 col-md-6 col-lg-4将显示为xs的12列，sm的8，md的6，以及lg的4。

所以看着你的代码，你只使用col-md-*类（col-md-6,col-md-offset-2），所以你的布局只在中等视口宽度上踢。如果您希望所有视口大小的布局相同，则需要使用col-xs-*类。如果您希望移动和桌面的外观略有不同，请在所有div上使用col-xs-*和col-md-*类。请注意，在xs设备上分割太多布局可能会导致对于其内容太小的列，这看起来很糟糕。

来源

2017-09-03 14:39:22 gmferland

Bootstrap Modal无法响应移动设备

回答

相关问题