首页 > 解决方案 > ASP.Net Core MVC 复选框对齐

问题描述

有人可以帮助我解决两个并排的复选框的问题。由于某种原因,它们与其他控件不对齐,我必须指定一个高度,否则 div 的高度为零。所有其他控件完美对齐。我附上了屏幕截图和我的代码。 在此处输入图像描述

                    <div class="row align-items-start">
                        <div class="col-2">
                            <label asp-for="customer.MeasureLoft" class="col-form-label">M (Loft)</label>
                        </div>
                        <div class="col-2">
                            <label asp-for="customer.MeasureIWI" class="col-form-label">M (IWI)</label>
                        </div>
                        <div class="col-2">
                            <label asp-for="customer.MeasureUFI" class="col-form-label">M (UFI)</label>
                        </div>
                        <div class="col-2">
                            <label asp-for="customer.MeasureRIR" class=" col-form-label">M (RIR)</label>
                        </div>
                        <div class="col-4">
                            <label asp-for="customer.MeasureESH_FTCH" class="col-form-label">M (ESH/FTCH)</label>
                        </div>
                    </div>
                    <div class="row align-items-start">
                        <div class="col-2">
                            <input asp-for="customer.MeasureLoft" class="form-control" style="width:100px;" />
                        </div>
                        <div class="col-2">
                            <input asp-for="customer.MeasureIWI" class="form-control" style="width:100px;" />
                        </div>
                        <div class="col-2">
                            <input asp-for="customer.MeasureUFI" class="form-control" style="width:100px;" />
                        </div>
                        <div class="col-2">
                            <input asp-for="customer.MeasureRIR" class="form-control" style="width:100px;" />
                        </div>
                        <div class="col-4">
                            <input asp-for="customer.MeasureESH_FTCH" class="form-control" style="width:100px;" />
                        </div>
                    </div>
                    <div class="row align-items-start">
                        <div class="col-6">
                            <label asp-for="customer.Flex" class="col-form-label">Flex</label>
                        </div>
                        <div class="col-6">
                            <label asp-for="customer.HCRO" class="col-form-label">HCRO</label>
                        </div>
                    </div>
                    <div class="row align-items-start" style="height: 38px;">
                        <div class="col-6">
                            <input asp-for="customer.Flex" class="form-check-input" type="checkbox" />
                        </div>
                        <div class="col-6">
                            <input asp-for="customer.HCRO" class="form-check-input" type="checkbox" />
                        </div>
                    </div>

标签: asp.netcheckboxalignment

解决方案


推荐阅读