Home >Web Front-end >HTML Tutorial >Regarding the problem of misaligned forms when browsing websites on mobile devices_html/css_WEB-ITnose
Regarding the problem of misaligned forms when browsing websites on mobile devices_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:44:55955browse
As shown in the picture
Please give me a solution. I tried the viewport but it still doesn’t work.
Full code:
<!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>
Reply to the discussion (solution)
I don’t know much about bootstrap, but if you remove the “col-xs-3” class, the overall layout will be OK.
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：CSS3 implements cool navigation_html/css_WEB-ITnoseNext article：CSS3 implements cool navigation_html/css_WEB-ITnose