在 MVC 中禁用控件包装答案

【问题标题】：Disable control wrapping in MVC在 MVC 中禁用控件包装
【发布时间】：2020-12-09 06:02:46
【问题描述】：

我有一个使用以下代码的视图。

<div class="tab-pane fade active" id="tab_1">
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.ID, "Facility Name fwefwf wefwefwef wefwefe", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("ID", null, htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.ID, "", new { @class = "text-danger" })
            </div>
        </div>


        <div class="form-group">
            @Html.LabelFor(model => model.ResidentID, "ResidentID", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.ResidentID, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.ResidentID, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.ClaimAmount, "Claim Amount", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.ClaimAmount, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.ClaimAmount, "", new { @class = "text-danger" })
            </div>
        </div>

当页面全屏时，换行会导致控件出现在下一行，而不是标签旁边。

WrappingControls

如何设置控件的样式以使文本框与标签显示在同一行？

【问题讨论】：

标签： css asp.net-core model-view-controller razor

【解决方案1】：

你可以尝试用<div class="form-group row">代替<div class="form-group"> 这是一个演示：

<form>
    <div class="tab-pane fade active" id="tab_1">
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group row">
            @Html.LabelFor(model => model.ID, "Facility Name fwefwf wefwefwef wefwefe", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <select asp-for="Id">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                @Html.ValidationMessageFor(model => model.ID, "", new { @class = "text-danger" })
            </div>
        </div>


        <div class="form-group row">
            @Html.LabelFor(model => model.ResidentID, "ResidentID", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.ResidentID, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.ResidentID, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group row">
            @Html.LabelFor(model => model.ClaimAmount, "Claim Amount", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.ClaimAmount, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.ClaimAmount, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>
</form>

结果：

如果还是不行，看位置

在您的布局中并将其放入<footer></footer>，如下所示：

<footer>
            &copy;2020--Consultants For Long Time Care
</footer>

【讨论】：