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

MyWeb - Using Bootstrap

回复讨论(解决方案)

首页

web前端

html教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:44 AM

如图

求解决方案啊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 id="MyWeb-nbsp-nbsp-Using-nbsp-Bootstrap">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了。

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7681

Java教程

1639

CakePHP 教程

1393

Laravel 教程

1286

PHP教程

1229

显示更多

Related knowledge

HTML容易为初学者学习吗？ Apr 07, 2025 am 12:11 AM

HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML，CSS和JavaScript的角色：核心职责 Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

HTML中起始标签的示例是什么？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

了解HTML，CSS和JavaScript：初学者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。