twitter-bootstrap - 仅动态调整 DropDownListFor 的宽度 - MVC

Question

我试图让每个表单组的 DropDownListFor 动态调整大小。第一个 DropDownList 始终包含比其他两个更多的字符。我试图让另外两个匹配第一个 DropDownList 的大小。

以下是原始代码：

<div class="form-horizontal my-5">
                <div class="form-group required">
                    <label class="control-label col-md-3">@FieldAliasUtilities.PerformanceManagement.PerformanceManagementAgreementYear</label>
                    <div class="col-md-3">
                        @if (Model.ContractId.HasValue)
                        {
                            @Html.DropDownListFor(model => model.ContractYearId, Model.ContractYearSelectionList, new { disabled = "disabled" })
                            @Html.HiddenFor(model => model.ContractYearId)
                        }
                        else
                        {
                            @Html.DropDownListFor(model => model.ContractYearId, Model.ContractYearSelectionList)
                        }
                    </div>
                </div>
                <div class="form-group required">
                    <label class="control-label col-md-3">@FieldAliasUtilities.PerformanceManagement.AssessmentFrequency</label>
                    <div class="col-md-3">
                        @if (Model.ContractId.HasValue || Model.YearTypeId > 0)
                        {
                            @Html.DropDownListFor(model => model.YearTypeId, Model.YearTypeSelectionList, new { disabled = "disabled" })
                            @Html.HiddenFor(model => model.YearTypeId)
                        }
                        else
                        {
                            @Html.DropDownListFor(model => model.YearTypeId, Model.YearTypeSelectionList, new { onchange = "changeReviewFrequency(event);" })
                        }
                    </div>
                </div>
                @if (Model.UserRole != Signify.HumanResources.PerformanceManagementV2.Contract.UserPageRoleList.User)
                {
                    <div class="form-group required">
                        @Html.LabelFor(model => model.DualApprove, new { @class = "control-label col-md-3" })
                        <div class="col-md-3">
                            @if (Model.ContractId.HasValue || SettingUtilities.PerformanceManagement.ForceDualApproval)
                            {
                                @Html.DropDownListFor(model => model.DualApprove, Model.DualApproveSelectList, new { disabled = "disabled" })
                                @Html.HiddenFor(model => model.DualApprove)
                            }
                            else
                            {
                                @Html.DropDownListFor(model => model.DualApprove, Model.DualApproveSelectList, new { onchange = "changeDualApproveMessage(this.value);" })
                            }
                        </div>
                        <div class="col-md-6" style="font-size: 12px; padding-top: 10px;">
                            <div id="dualapprove-on">* Only the @FieldAliasUtilities.PerformanceManagement.Manager will be able to create, approve and rate electronically.</div>
                            <div id="dualapprove-off" style="display:none">* Both @FieldAliasUtilities.PerformanceManagement.Employee and @FieldAliasUtilities.PerformanceManagement.Manager will be required to approve and rate electronically.</div>
                        </div>
                    </div>

                }

            </div>

我能够将第一个 DropDownList 的宽度设置为 auto ，它可以动态调整它的大小，但我无法让其他两个匹配大小。任何帮助，将不胜感激。

标签： twitter-bootstrapmodel-view-controllerdropdownlistfor