Question

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

<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">	
          <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">	
              <div class="col-md-6">
                <div class="checkbox">
                  <label>
                    <input type="checkbox"> Remember me
                  </label>
                </div>	
              </div>
              <div class="col-md-4 col-md-offset-2">	
                <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">	
            <div class="col-md-6">
              <p class="ta-l">Don't have an account ? </p>
            </div>	
            <div class="col-md-4 col-md-offset-2">	
              <button class="btn-gst"  data-toggle="modal"  data-dismiss="modal" data-target="#at-signup" >
                Sign Up
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 1

Bootstrap不仅仅是一个响应式布局，而且它允许您非常具体地了解您希望布局如何查看不同的视口大小。这意味着对于很多类，您可以选择希望元素显示的特定最小视口宽度。低于该最小值，该元素将占据整整12列。视口大小的确切像素宽度在Media Queries section of the documentation中定义，但对于手机大致分为xs，平板电脑为sm，小型笔记本电脑为md，{ {1}}适用于较大的笔记本电脑和台式机。

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

因此，查看代码时，您只使用lg类（col-md-*，col-md-6），因此您的布局只会在中等视口宽度处启动。如果希望所有视口大小的布局相同，则需要使用col-md-offset-2类。如果您希望移动设备和桌面设备略有不同，请在所有col-xs-*上使用col-xs-*和col-md-*课程。请注意，在div设备上过多地划分您的布局会导致列太小而不适合其内容，这看起来很糟糕。

Answer 2

如@gmferland所述，这是Bootstrap模态的局限性。

您可能想使用我的图书馆来克服它：https://github.com/keaukraine/bootstrap-fs-modal

还可用于Bootstrap 4：https://github.com/keaukraine/bootstrap4-fs-modal

Bootstrap Modal对移动设备无响应

2 个答案: