调整引导表单字段的大小并对齐
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了调整引导表单字段的大小并对齐相关的知识，希望对你有一定的参考价值。
我正在尝试缩短bootstrap的宽度表单字段并将它们与中心对齐，但我还没有找到办法。
<div class="full-width" style="background:#eaeaea;">
<div class="container" style="padding:30px 0;">
<div class="business-container">
<!--<a href="contacts.php" class="" style="color: #000; font-size: 14px; font-weight: bold;"></a>-->
<div class="business">
<h1>Lorem Ipsum dolor?</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<!-- Form -->
<form>
<div class="row">
<div class="col-xs-12 col-md-5" style="margin: 12px 0;">
<input type="text" class="form-control" placeholder="Name">
</div>
<div class="col-xs-12 col-md-5" style="margin: 12px 0;">
<input type="email" class="form-control" placeholder="Email">
</div>
<div class="col-xs-12 col-md-5">
<button type="submit" class="btn btn-primary mb-2" style="margin:-30px 0 0; width:100px;">Send</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
答案
只需在50% div中添加一个business宽度，并给它一个0 auto边距和center文本对齐值。
这是一个jsfiddle链接。
https://jsfiddle.net/2pnLj1mn/2/
（有关输入字段的大小，请参阅上面链接中包含的css注释。）
另一答案
在text-center中使用<div class="col-xs-12 col-md-5 text-center">
编辑：
如果你使用Bootstrap，这将工作！此外，您可以使用text-aling:center;
另一答案
显示表单中心使用css属性margin:auto和width:50%。如下。
.business {
margin: auto;
width: 50%;
}<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="full-width" style="background:#eaeaea;">
<div class="container" style="padding:30px 0;">
<div class="business-container">
<!--<a href="contacts.php" class="" style="color: #000; font-size: 14px; font-weight: bold;"></a>-->
<div class="business">
<h1>Lorem Ipsum dolor?</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<!-- Form -->
<form>
<div class="row">
<div class="col-xs-12 col-md-5" style="margin: 12px 0;">
<input type="text" class="form-control" placeholder="Name">
</div>
<div class="col-xs-12 col-md-5" style="margin: 12px 0;">
<input type="email" class="form-control" placeholder="Email">
</div>
<div class="col-xs-12 col-md-5">
<button type="submit" class="btn btn-primary mb-2" style="margin:0px 0 0; width:100px;">Send</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>以上是关于调整引导表单字段的大小并对齐的主要内容，如果未能解决你的问题，请参考以下文章