如何将表单输入与boostrap对齐？ （ASP.NET CORE MVC）

Question

我在ASP.NET Core MVC中将输入表单与引导程序对齐时遇到了一些问题。

我有一个局部视图，有两个输入字段（表示Post类的标题和消息）和一个按钮，但输入将无法正确对齐。

我在这里有一张照片：

有谁知道如何正确地与引导程序对齐？

我已经尝试将它们放在单独的<div>s中，使用类“form-group”，并且也在同一个<div>中，但它不能解决问题。

@model Post
<form asp-controller="Post" asp-action="Post" method="post">
<div class="form-group">
<label asp-for="@Model.Title"></label>
<input asp-for="@Model.Title" />
</div>
<div class="form-group">
    <label asp-for="@Model.Message"></label>
<input asp-for="@Model.Message" />
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>

Answer 1

您可以使用像.col-4这样的类为列中的所有标签赋予固定宽度，这样所有标签都会占用相同的空间，无论它们是否更小，或者另一种好的方法是使用这些标签位于字段顶部，无论它适合的标签文本有多长