在Bootstrap 4中,可以使用内置的类来实现垂直对齐表单行类中的按钮。以下是一种常见的方法:
<form>
<div class="form-row align-items-center">
<div class="col-auto">
<label class="sr-only" for="inlineFormInput">Name</label>
<input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
</div>
<div class="col-auto">
<label class="sr-only" for="inlineFormInputGroup">Username</label>
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</div>
</div>
</form>
align-items-center
类来实现垂直居中对齐。这个类应用在form-row
元素上,它会将其内部的元素垂直居中对齐。col-auto
类来指定每个表单元素的宽度自动调整。这样可以确保表单元素和按钮在同一行显示。mb-2
类来添加一些底部的间距,以增加表单的可读性。这样,你就可以在Bootstrap 4中垂直对齐表单行类中的按钮了。
关于Bootstrap 4的更多信息和使用方法,你可以参考腾讯云的Bootstrap 4产品介绍页面:Bootstrap 4产品介绍
领取专属 10元无门槛券
手把手带您无忧上云