如何让表单的行在 Razor 页面中水平显示

Question

我目前正在使用 Razor Pages 创建一个 Web 应用程序。我通过单击“使用实体框架 (CRUD) 的 Razor 页面”为我的模型自动创建了“创建”、“编辑”、“删除”和“详细信息”页面来搭建“项目”模型。但是，在我的“创建”页面上，它显示如下：

创建垂直显示的字段：

我有很多属性，所以这个页面变得很长并且需要大量滚动。有没有办法让字段水平显示如下：

创建水平显示的字段：

我看到了一些如何编辑 HTML 文件以实现此目的的示例，但我是 HTML 新手，并且由于自动生成的代码，我不知道我需要更改什么。这是代码的sn-p：

<div class="row">
    <div class="col-md-4">
        <form method="post">

            <b>General:</b>

            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Project.projectID" class="control-label"></label>
                <input asp-for="Project.projectID" class="form-control" />
                <span asp-validation-for="Project.projectID" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Project.projectName" class="control-label"></label>
                <input asp-for="Project.projectName" class="form-control" />
                <span asp-validation-for="Project.projectName" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Project.projectManager" class="control-label"></label>
                <input asp-for="Project.projectManager" class="form-control" />
                <span asp-validation-for="Project.projectManager" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Project.projectClient" class="control-label"></label>
                <input asp-for="Project.projectClient" class="form-control" />
                <span asp-validation-for="Project.projectClient" class="text-danger"></span>
            </div>
        </form>
    </div>
</div>

关于如何更改代码以使我的输入字段水平显示的任何想法？

Answer 1

默认情况下，Asp.net 核心应用程序使用 Bootstrap 样式，因此，您可以尝试更改代码如下：

<h4>General:</h4> 
<hr />
<div class="row">
    <div class="col-md-12">
        <form method="post">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group row">
                        <label asp-for="Project.projectID" class="control-label col-md-3"></label>
                        <input asp-for="Project.projectID" class="form-control col-md-9" />
                        <span asp-validation-for="Project.projectID" class="text-danger"></span>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group row">
                        <label asp-for="Project.projectName" class="control-label col-md-3"></label>
                        <input asp-for="Project.projectName" class="form-control col-md-9" />
                        <span asp-validation-for="Project.projectName" class="text-danger"></span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group row">
                        <label asp-for="Project.projectManager" class="control-label col-md-3"></label>
                        <input asp-for="Project.projectManager" class="form-control col-md-9" />
                        <span asp-validation-for="Project.projectManager" class="text-danger"></span>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group row">
                        <label asp-for="Project.projectClient" class="control-label col-md-3"></label>
                        <input asp-for="Project.projectClient" class="form-control col-md-9" />
                        <span asp-validation-for="Project.projectClient" class="text-danger"></span>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

然后输出如下：

有关 Bootstrap 样式的更多详细信息，请查看Bootstrap 4 Grid System。