我正在设计一个登录表单，它几乎完成了。我面临的问题是，我正在使用的（引导）模式是不响应移动的设备。我已经包括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>
3条答案
按热度按时间n53p2ov01#
Bootstrap不仅仅是一个响应式布局，它还允许您非常具体地确定您希望布局在不同的视口大小下如何显示。这意味着对于许多类，您需要选择一个特定的最小视口宽度来显示元素。如果低于该最小值，该元素将占据整个12列。2 windows 大小的精确像素宽度在文档的媒体查询部分中定义，但大致可细分为手机
xs、平板电脑sm、小型笔记本电脑md以及大型笔记本电脑和台式机lg。例如，
col-md-6表示“当 windows 为中等或更大时显示为6列，当 windows 小于中等时显示为12列。”您可以用这种方式合并多个类以针对多个 windows 宽度。例如，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设备上过多地划分布局可能会导致列对于其内容来说太小，这看起来会很糟糕。qxgroojn2#
正如@gmferland提到的，这是Bootstrap模态的一个限制。
你可能想用我的图书馆来克服它：https://github.com/keaukraine/bootstrap-fs-modal
还可用于Bootstrap 4：https://github.com/keaukraine/bootstrap4-fs-modal
0x6upsns3#
为模态背景问题。你可以添加这个css。
有时模式背景覆盖不适合移动的视图。