我在将Bootstrap登录表单居中时遇到了一些麻烦。
定心
我尝试过多种不同的方式来使表格居中。整个div以col-md-offset类为中心,但是我不明白如何使内容(表单输入)以div本身为中心。对于文本,我知道您可以使用文本对齐方式,对于内容,我通常使用margin:0,auto ;,但这不适用于表单。
如果可能的话,我也想将其垂直居中,但是鉴于我在互联网上进行的研究,这样做似乎非常困难,并且在引导程序参考资料中也没有找到任何解释方法。
另一个随机的问题是,为什么在表单上左角是直角而右角是圆角?即使更改角半径,也只会影响右角。
代码:
如果要将表单放置在屏幕中央,请使用position: absolute
而不使用网格。您可以使用媒体查询来控制其他因素,具体取决于您最终希望在较小或较大视口上显示的内容。
另外,您使用input-group
(Docs)并没有什么意义,这是您对输入进行不良样式设置的原因(一个比另一个短border-radius
)。使用form-group
代替。
.myForm {
min-width: 500px;
position: absolute;
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2.5rem
}
@media (max-width: 500px) {
.myForm {
min-width: 90%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" id="logoText">Test</a>
</div>
<div class="collapse navbar-collapse">
<form class="navbar-form navbar-right" method="post">
<div class="form-group">
<input type="email" class="form-control" name="loginemail" id="loginemail" placeholder="email" />
</div>
<div class="form-group">
<input type="password" class="form-control" name="loginpassword" placeholder="password" />
</div>
<input type="submit" name="submit" class="btn btn-default" value="Log In" />
</form>
</div>
</div>
</div>
<div class="container">
<form class="myForm" method="post">
<div class="form-group">
<label for="email">Email</label>
<input class="form-control input-lg" type="email" name="email" id="email" placeholder="email" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input class="form-control input-lg" type="password" name="password" placeholder="password" />
</div>
<div class="form-group">
<input type="submit" name="submit" class="btn btn-success btn-lg" value="Sign Up" />
</div>
</form>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句