gpt4 book ai didi

html - 调整 Bootstrap 表单字段的大小和对齐

转载 作者:行者123 更新时间:2023-11-28 02:15:25 24 4
gpt4 key购买 nike

我正在尝试缩短 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>

最佳答案

要显示表单中心,请使用 css 属性 margin:autowidth: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>

关于html - 调整 Bootstrap 表单字段的大小和对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48507752/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com