应该是滚动条的出现与消失导致的。。。楼主可以js控制或者自定义掉滚动条的宽度。。。
61,112
社区成员
发帖
与我相关
我的任务
分享bootstrap写的H5页面，在手机浏览器横屏显示后，再竖屏显示时，最右侧多了很多空白，怎么删除？
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>登陆</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
body {
margin: 20px 10px;
}
.control-label{
padding-top: 7px;
padding-right: 10px;
margin-bottom: 0;
text-align: center !important;
}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
position: relative;
min-height: 1px;
padding-right: 0px;
padding-left: 0px;
}
</style>
<!-- 以下2个插件是用于在IE8支持HTML5元素和媒体查询的，如果不用可移除 -->
<!-- 注意:Respond.js不支持file:// 方式的访问 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div class="container">
<form class="form-horizontal" action="post" target="#" role="form">
<div class="form-group">
<div class="input-group">
<span for="mobilenumber" class="input-group-addon" id="basic-addon1"> +86 </span>
<input name="mobilenumber" id="mobilenumber" type="text" class="form-control" placeholder="请输入手机号" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span for="password" class="input-group-addon" id="basic-addon2">登录密码</span>
<input name="password" id="password" type="text" class="form-control" placeholder="6-16位数字或字母，区分大小写" aria-describedby="basic-addon2">
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-large btn-block btn-primary">登录</button>
</div>
<div class="form-group">
<label>忘记密码？</label>
<a href="register.html"><label class="pull-right">注册</label></a>
</div>
</form>
</div>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>登陆</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
body {
margin: 20px 10px;
}
.control-label{
padding-top: 7px;
padding-right: 10px;
margin-bottom: 0;
text-align: center !important;
}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
position: relative;
min-height: 1px;
padding-right: 0px;
padding-left: 0px;
}
</style>
<!-- 以下2个插件是用于在IE8支持HTML5元素和媒体查询的，如果不用可移除 -->
<!-- 注意:Respond.js不支持file:// 方式的访问 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div class="container">
<form class="form-horizontal" action="post" target="#" role="form">
<div class="form-group">
<div class="input-group">
<span for="mobilenumber" class="input-group-addon" id="basic-addon1"> +86 </span>
<input name="mobilenumber" id="mobilenumber" type="text" class="form-control" placeholder="请输入手机号" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span for="password" class="input-group-addon" id="basic-addon2">登录密码</span>
<input name="password" id="password" type="text" class="form-control" placeholder="6-16位数字或字母，区分大小写" aria-describedby="basic-addon2">
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-large btn-block btn-primary">登录</button>
</div>
<div class="form-group">
<label>忘记密码？</label>
<a href="register.html"><label class="pull-right">注册</label></a>
</div>
</form>
</div>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
...全文
请发表友善的回复…
发表回复
