我的主要问题是我复制的登录页面模板,知道如何解决吗?
我调整了盒子的宽度,因为它对我的元素来说太宽了。我添加了一定的宽度,将 modal-dialog 的宽度设置为 450px .modal-dialog { width:450px; }
。它现在在浏览器中正常,但为什么当我在小型设备(例如 iphone4)上查看它时它现在没有响应?
<div id="loginModal" class="modal show" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h1 class="text-center">Login</h1>
</div>
<div class="modal-body">
<form class="form col-md-12 center-block">
<div class="form-group">
<form method="POST" action="login.php">
<input type="text" class="form-control input-lg" placeholder="Username">
</div>
<div class="form-group">
<input type="password" class="form-control input-lg" placeholder="Password">
</div>
<div class="form-group">
<button class="btn btn-primary btn-lg btn-block">Sign In</button>
<span class="pull-right"><a href="#">Register</a></span><span><a href="#">Need help?</a></span>
</div>
</form>
</div>
<div class="modal-footer">
<div class="col-md-12">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</div>
</div>
</div>
最佳答案
正如您所说,您已将模态对话框设置为:
.modal-dialog { width:450px; }
那不是响应式的,那是固定的 - 您需要在 Bootstrap 的媒体查询 block 中向模态对话框添加其他宽度
例如:
@media (min-width: 768px) {
.modal-dialog { width: 300px; }
}
请注意,上面的代码只是示例,并不是您需要的确切代码,因为您需要找出最适合您的元素的代码。
关于小屏幕上的 HTML 设计问题,Twitter Bootstrap 自定义登录,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28873455/