Bootstrap登录不正确适合移动设备
我正在使用模板创建一个Bootstrap登录页面，它不想为移动设备调整大小，而是变成一个非常小的登录表单，如下所示：
应该时，如下所示：
这是我的代码：
<html>
<head>
<meta charset="UTF-8">
<title>Login Page</title>
<link href="lib/bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="lib/font-awesome-4.5.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="lib/css/signin.css" rel="stylesheet" type="text/css"/>
<link href="lib/js/winmarkltd-BootstrapFormHelpers-d4201db/dist/css/bootstrap-formhelpers.min.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<h2> Your Company</h2>
</div>
</nav>
<div class="container-fluid formThis">
<div style="text-align: center">
<h2>Login Here</h2>
</div>
<form id="loginForm" class="form-signin" action="login.php" method="post">
<label for="inputEmail" class="sr-only">Email address</label>
<input type="Username" id="inputEmail" class="form-control" name="username" placeholder="User Name" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" name="password" placeholder="Password" required><br>
<button id="login" class="btn btn-lg btn-primary btn-block" type="submit"><i class="fa fa-sign-in"></i>
Sign in</button>
<a href="#" id="signUp" class="btn btn-lg btn-warning btn-block" data-toggle="modal" data-target="#signUpModal"><i class="fa fa-user-plus"></i> Sign Up</a>
</form>
</div> <!-- /container -->
<div id="signUpModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><i class="fa fa-user"></i> Register For An Account</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="col-sm-12">
<form class="form-horizontal" id="profileForm" action="register.php" method="post">
<div class="form-group">
<label class="col-md-3 control-label">First name:</label>
<div class="col-md-8">
<input class="form-control" name="first_name" placeholder="Jane" type="text">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Last name:</label>
<div class="col-md-8">
<input class="form-control" name="last_name" placeholder="Doe" type="text">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Username:</label>
<div class="col-md-8">
<input class="form-control" name="username" placeholder="jane." type="text">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Role</label>
<div class="col-md-8">
<input class="form-control" name="group_role" placeholder="Role" type="text">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" data-toggle="tooltip" title="If 'Salesman', enter sales region otherwise leave blank.">Region:</label>
<div class="col-md-8">
<input class="form-control" name="region" placeholder="region" type="text">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Department</label>
<div class="col-md-8">
<input class="form-control" name="department" placeholder="Department" type="text">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Email:</label>
<div class="col-md-8">
<input class="form-control" name="email_address" placeholder="janesemail@gmail.com" type="text">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Phone</label>
<div class="col-md-8">
<input type="text" name="phone" placeholder="555-123-4567" class="input-medium bfh-phone form-control" data-format="+1 (ddd) ddd-dddd">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Password:</label>
<div class="col-md-8">
<input class="form-control" name="password" type="password">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Confirm password:</label>
<div class="col-md-8">
<input class="form-control" name="confirm_password" type="password">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label"></label>
<div class="col-md-8">
<button class="btn btn-primary" value="Send Request" type="submit"><i class="fa fa-paper-plane"></i> Send Request</button>
<span></span>
<input class="btn btn-default" value="Cancel" id="cancel" type="reset">
</div>
</div>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="lib/js/jquery-2.1.4.js" type="text/javascript"></script>
<script src="lib/bootstrap-3.3.6-dist/js/bootstrap.min.js" type="text/javascript"></script>
<script src="lib/js/winmarkltd-BootstrapFormHelpers-d4201db/dist/js/bootstrap-formhelpers.min.js" type="text/javascript"></script>
</body>
样式：
.navbar-default{
height: 100px;
}
body {
background: #eee !important;
}
.wrapper {
margin-top: 80px;
margin-bottom: 80px;
}
.form-signin {
max-width: 380px;
padding: 15px 35px 45px;
margin: 0 auto;
background-color: #fff;
border: 1px solid rgba(0,0,0,0.1);
.form-signin-heading,
.checkbox {
margin-bottom: 30px;
}
.checkbox {
font-weight: normal;
}
.form-control {
position: relative;
font-size: 16px;
height: auto;
padding: 10px;
/*@include box-sizing(border-box);*/
&:focus {
z-index: 2;
}
}
input[type="text"] {
margin-bottom: -1px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
input[type="password"] {
margin-bottom: 20px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
我做错了什么？
2 个答案:
答案 0 :(得分：2)
您应该声明元标记：
<meta name="viewport" content="width=device-width, initial-scale=1">
仅当您在<head>标记内声明此内容时，浏览器才会使用移动设备的屏幕宽度。
答案 1 :(得分：0)
<div class="wall">
<div class="col-md-6 col-md-offset-3 col-sm-12 col-xs-12">
<div style="text-align: center">
<h2>Login Here</h2>
</div>
<form id="loginForm" class="form-signin col-md-12 col-sm-12 col-xs-12" action="login.php" method="post">
<label for="inputEmail" class="sr-only">Email address</label>
<input type="Username" id="inputEmail" class="form-control" name="username" placeholder="User Name" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" name="password" placeholder="Password" required><br>
<button id="login" class="btn btn-lg btn-primary btn-block" type="submit"><i class="fa fa-sign-in"></i>
Sign in</button>
<a href="#" id="signUp" class="btn btn-lg btn-warning btn-block" data-toggle="modal" data-target="#signUpModal"><i class="fa fa-user-plus"></i> Sign Up</a>
</form>
</div>
</div>`
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？