Regarding the problem of misaligned forms when browsing websites on mobile devices_html/css

Regarding the problem of misaligned forms when browsing websites on mobile devices_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:44:55

Original

961 people have browsed it

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>

Copy after login

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.