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

Question

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

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

我在此处有一张照片：

有人知道如何将它们与引导程序正确对齐吗？

我曾尝试将它们与类“ form-group”一起放在单独的<div>s中，也放在同一个<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这样的类将所有标签的行宽度固定为一列， 这样，无论标签较小，所有标签都将占用相同的空间，或者另一种好的方法是在字段顶部使用标签，无论标签文本在< / p>

Answer 2

尝试一下   //使用Bootstrap4

 <form asp-controller="Post" asp-action="Post" method="post">
    <div class="container">
        <div class=row>
            <div class="form-group">
                <div class="col-md-4">
                    <label asp-for="@Model.Title">Title</label> 
                </div>

                <div class="col-md-4">
                    <input asp-for="@Model.Title" />
                </div>
            </div>
        </div>

        <div class=row>
            <div class="form-group">
                <div class="col-md-4">
                    <label asp-for="@Model.Message">Message</label> 
                </div>

                <div class="col-md-4">
                    <input asp-for="@Model.Message" />
                </div>
            </div>
        </div>
                <button type="submit" class="btn btn-primary">Post</button>
    </div>
</form>