> 웹 프론트엔드 > HTML 튜토리얼 > 关于移动设备下浏览网站表单错位的问题_html/css_WEB-ITnose

关于移动设备下浏览网站表单错位的问题_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:44:55
원래의
961명이 탐색했습니다.

如图


求解决方案啊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了。


원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿