如何使用Bootstrap居中表单？ [英] How to center a form using Bootstrap?
本文介绍了如何使用Bootstrap居中表单？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想将包含两个输入（用户名和密码）的表格居中：
< h2 align =center >认证< / H2>
< form method =postaction =/ signinclass =form-horizontalrole =formalign =center>
< div class =form-groupalign =center>
< label class =control-label col-sm-2for =username> username< em> *< / em>< / label>
< div class =col-sm-6>
< input type =textname =usernameid =usernameplaceholder =usernamerequired =trueclass =form-control/>
< / div>
< / div>
< div class =form-group>
< label class =control-label col-sm-2for =password>密码< em> *< / em>< / label>
< div class =col-sm-6>
< input type =passwordname =passwordid =passwordrequired =trueclass =form-control/>
< / div>
< / div>
< div class =form-group>
< div class =col-sm-offset-2 col-sm-8>
< input type =submitname =signinid =signinvalue =sign inclass =btn btn-default/>
< / div>
< / div>
< / form>
但是当我运行页面时，表单不在页面的中心。我在style.css中添加了：
.form-horizontal {
display：block;
margin-left：auto;
margin-right：auto;
}
但没有用。
<您好，您已经接近您的类 .form-horizontal C>。
使用这个中心页面中间的表单。
.center {
position：absolute;
剩下：0;
right：0;
margin：auto;
}
您现在需要调整 col- sm-xx 填写并在所有屏幕尺寸下正常工作。
下面是截图，包含表单的蓝色div水平居中。
以下是表单中的类更改为填充和处理所有屏幕尺寸的表单。
<！DOCTYPE html>< html lang =en> < HEAD> < meta charset =utf-8> < meta http-equiv =X-UA-Compatiblecontent =IE = edge> < meta name =viewportcontent =width = device-width，initial-scale = 1> < meta name =descriptioncontent => < meta name =authorcontent => < link rel =iconhref =../../ favicon.ico> < title>如何使用Bootstrap将表格居中< / title> <！ - 引导核心CSS - > < link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css>< style> body {padding-top：50px;} .spacer {margin-top：2％; margin-bottom：2％;} .block {height：300px; padding-top：15px; background-color：darkorange;} .block2 {min-height：160px; padding-top：15px; } .center {position：absolute; / * top：0;底部：0; * / left：0;正确：0;保证金：汽车; }< /风格>< /头><身体GT; < nav class =navbar navbar-inverse navbar-fixed-top> < div class =container> < div class =navbar-header> < button type =buttonclass =navbar-toggle collapseddata-toggle =collapsedata-target =＃navbararia-expanded =falsearia-controls =navbar> < span class =sr-only>切换导航< / span> < span class =icon-bar>< / span> < span class =icon-bar>< / span> < span class =icon-bar>< / span> < /按钮> < a class =navbar-brandhref =＃>项目名称< / a> < / DIV> < div id =navbarclass =collapse navbar-collapse> < ul class =nav navbar-nav navbar-right> < li class =active>< a href =＃>主页< / a>< / li> < li>< a href =＃about>关于< / a>< / li> < li>< a href =＃contact>联络人< / a>< / li> < / UL> < / div><！ - /。nav-collapse - > < / DIV> < / nav>< div class =container col-lg-12 spacer>< / div> < div class =container col-lg-12 block> < div class =row col-xs-6 block2 bg-primary center> < form method =postaction =/ signinclass =form-horizontalrole =formalign =center> < div class =form-group> < label class =control-label col-sm-3for =username> username< em> *< / em>< / label> < div class =col-sm-8 col-xs-12> < input type =textname =usernameid =usernameplaceholder =usernamerequired =trueclass =form-control/> < / DIV> < / DIV> < div class =form-group> < label class =control-label col-sm-3for =password> password< em> *< / em>< / label> < div class =col-sm-8 col-xs-12> < input type =passwordname =passwordid =passwordrequired =trueclass =form-control/> < / DIV> < / DIV> < div class =form-group> < div class =col-sm-offset-2 col-sm-8> < input type =submitname =signinid =signinvalue =sign inclass =btn btn-default/> < / DIV> < / DIV> < /形式> < / DIV> < / div><！ - /.container - > <！ - Bootstrap核心JavaScript - > <！ - 放置在文档的末尾，以便页面加载更快 - > < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js>< / script> < script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js>< / script> < / body>< / html>
I want to center a form containing two inputs(username and password):
<h2 align="center" >Authentication</h2>
<form method="post" action="/signin" class="form-horizontal" role="form" align="center">
<div class="form-group" align="center">
<label class="control-label col-sm-2" for="username">username<em>*</em></label>
<div class="col-sm-6">
<input type="text" name="username" id="username" placeholder="username" required="true" class="form-control"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="password">password<em>*</em></label>
<div class="col-sm-6">
<input type="password" name="password" id="password" required="true" class="form-control"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<input type="submit" name="signin" id="signin" value="sign in" class="btn btn-default"/>
</div>
</div>
</form>
but when I run the page, the form isn't in the center of the page. I added in the style.css:
.form-horizontal{
display:block;
margin-left:auto;
margin-right:auto;
}
but that didn't work.
解决方案
Slim Hmidi Hi there, You were close with your class of .form-horizontal.
Using this will center the form in the middle of the page.
.center {
position: absolute;
left: 0;
right: 0;
margin: auto;
}
You will just now need to adjust the col-sm-xx within the form to fill and work correctly at all screen sizes.
Here is a screenshot, the blue div that holds the form is centered horizontally.
Here is the form with the classes in the form changed to fill and work on all screen sizes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>How to center a form using Bootstrap</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
}
.spacer {
margin-top: 2%;
margin-bottom: 2%;
}
.block {
height: 300px;
padding-top: 15px;
background-color: darkorange;
}
.block2 {
min-height: 160px;
padding-top: 15px;
}
.center {
position: absolute;
/* top: 0;
bottom: 0; */
left: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand " href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container col-lg-12 spacer"></div>
<div class="container col-lg-12 block">
<div class="row col-xs-6 block2 bg-primary center">
<form method="post" action="/signin" class="form-horizontal" role="form" align="center">
<div class="form-group" >
<label class="control-label col-sm-3" for="username">username<em>*</em></label>
<div class="col-sm-8 col-xs-12">
<input type="text" name="username" id="username" placeholder="username" required="true" class="form-control"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="password">password<em>*</em></label>
<div class="col-sm-8 col-xs-12">
<input type="password" name="password" id="password" required="true" class="form-control"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<input type="submit" name="signin" id="signin" value="sign in" class="btn btn-default"/>
</div>
</div>
</form>
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
这篇关于如何使用Bootstrap居中表单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
