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

Question

我目前正在使用 Razor Pages 创建网络应用程序。我通过单击“使用 Entity Framework (CRUD) 的 Razor 页面”构建了“项目”模型，它会自动为我的模型创建“创建”、“编辑”、“删除”和“详细信息”页面。但是，在我的“创建”页面上，它显示如下：

创建垂直显示的字段：

我有很多属性，所以这个页面很长，需要滚动很多次。有没有办法让字段像这样水平显示：

创建水平显示的字段：

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

<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。

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

How to get rows of a form to display horizontally in Razor Pages

html

razor

asp.net-core

razor-pages