Heim > Artikel > Web-Frontend > 关于移动设备下浏览网站表单错位的问题_html/css_WEB-ITnose
关于移动设备下浏览网站表单错位的问题_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:44:55919Durchsuche
如图
求解决方案啊viewport我试了下还是不行
完整代码：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>MyWeb - Using Bootstrap</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"> <style type="text/css"> .panel{ transition: box-shadow 0.8s; -moz-transition: box-shadow 0.8s; /* Firefox 4 */ -webkit-transition: box-shadow 0.8s; /* Safari 和 Chrome */ -o-transition: box-shadow 0.8s; padding: 20px; border: 5px solid #ccc; filter: alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.70; } .panel:hover{ box-shadow: 0px 0px 25px #5bc0de; } body{ background-image: url(bg.jpg); background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-repeat: no-repeat; } .footer{ position: absolute; left: 12%; top: 90%; } </style><!-- <!?-[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]?->--></head><body> <script src="bootstrap/js/jquery-2.1.3.min.js"></script> <script src="bootstrap/js/bootstrap.js"></script> <div class="container"> <h1>MyWeb - Using Bootstrap</h1> <br /> <div class="panel col-xs-3"> <form> <div class="form-group"> <label for="username">用户名</label> <input type="text" class="form-control" id="username" placeholder="手机号/邮箱"> </label> </div> <div class="form-group"> <label for="password">密码</label> <input type="password" class="form-control" id="password" placeholder=""> </label> </div> <div class="checkbox"> <label> <input type="checkbox"> 自动登录 </label> <a style="float: right;" href="http://urlikesunshine.com">忘记密码</a> </div> <div align="center"> <button type="submit" class="btn btn-default">登录</button> </div> </form> </div> <div class="footer"><strong>版权所有 Sunshine 2015</strong></div> </div></body></html>
回复讨论(解决方案)
bootstrap不是很懂，不过去掉“col-xs-3”这个类，整体布局就OK了。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：CSS3实现酷炫导航_html/css_WEB-ITnoseNächster Artikel：canvas刮奖效果_html/css_WEB-ITnose