表单中输入字段的右对齐不起作用

Question

我有一个包含三列的表单，每列中有多对标签 + 输入。我正在努力让输入字段与行的右端对齐。我曾经在 bootstrap 3 中为此使用 pull-right，但无法弄清楚与 V5 中的等价物是什么。我已经尝试了 justify-content-end、float-right 和 align-items-right，但没有效果。

这是目前的样子：

<form>
    <div class="row">
        <div class="col-md-4">
            <div class="row m-1">
                <label class="col-sm-5 col-form-label">PurchasePrice</label>
                <div class="col-sm-4 align-self-end d-flex justify-content-end">
                    <input asp-for="PurchasePrice" class="form-control align-self-end d-flex justify-content-end" />
                    <span asp-validation-for="PurchasePrice" class="text-danger"></span>
                </div>
            </div>
            <div class="row m-1">
                <label class="col-sm-5 col-form-label">BasicPrice</label>
                <div class="col-sm-4">
                    <input asp-for="BasicPrice" class="form-control float-right" />
                    <span asp-validation-for="BasicPrice" class="text-danger"></span>
                </div>
            </div>

            <div class="row m-1">
                <label class="col-sm-5 col-form-label">Discount</label>
                <div class="col-sm-4">
                    <input asp-for="Discount" class="form-control float-right" />
                    <span asp-validation-for="Discount" class="text-danger"></span>
                </div>
            </div>

            <div class="row m-1">
                <label asp-for="RetailPrice" class="col-sm-5 col-form-label">RetailPrice</label>
                <div class="col-sm-4">
                    <input asp-for="RetailPrice" class="form-control float-right" />
                    <span asp-validation-for="RetailPrice" class="text-danger"></span>
                </div>
            </div>
            <div class="row m-1">
                <label asp-for="IncludedDealerOptionPrice" class="col-sm-5 col-form-label">Gesamtnachlass auf Basisfahrzeug</label>
                <div class="col-sm-4">
                    <input asp-for="IncludedDealerOptionPrice" class="form-control float-right" />
                    <span asp-validation-for="IncludedDealerOptionPrice" class="text-danger"></span>
                </div>
            </div>
            <div class="row m-1">
                <label asp-for="Listprice" class="col-sm-5 col-form-label">ListPrice</label>
                <div class="col-sm-4">
                    <input asp-for="ListPrice" class="form-control float-right" />
                    <span asp-validation-for="ListPrice" class="text-danger"></span>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="row m-1">
                <label asp-for="OverallDiscountBasic" class="col-sm-5 col-form-label">Gesamtnachlass auf Basisfahrzeug (%)</label>
                <div class="col-sm-4">
                    <input asp-for="OverallDiscountBasic" class="form-control float-right" />
                    <span asp-validation-for="OverallDiscountBasic" class="text-danger"></span>
                </div>
            </div>
            <div class="row m-1">
                <label class="col-sm-5 col-form-label">Gesamtnachlass auf Listenpreis (%)</label>
                <div class="col-sm-4">
                    <input asp-for="OverallDiscountList" class="form-control float-right" />
                    <span asp-validation-for="OverallDiscountList" class="text-danger"></span>
                </div>
            </div>

            <div class="row m-1">
                <label class="col-sm-5 col-form-label">Gesamtnachlass inkl. Händleroptionen (%)</label>
                <div class="col-sm-4">
                    <input asp-for="OverallDealerDiscount" class="form-control float-right" />
                    <span asp-validation-for="OverallDealerDiscount" class="text-danger"></span>
                </div>
            </div>

            <div class="row m-1">
                <label asp-for="RetailPrice" class="col-sm-5 col-form-label">Überbewertung Wholesale (€)</label>
                <div class="col-sm-4">
                    <input asp-for="OvervaluationWholeSale" class="form-control float-right" />
                    <span asp-validation-for="OvervaluationWholeSale" class="text-danger"></span>
                </div>
            </div>

            <div class="row m-1">
                <label asp-for="Listprice" class="col-sm-5 col-form-label">Überbewertung Merbag (€)</label>
                <div class="col-sm-4">
                    <input asp-for="OvervaluationMerbag" class="form-control float-right" />
                    <span asp-validation-for="OvervaluationMerbag" class="text-danger"></span>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="row m-1">
                <label asp-for="DealerDiscountList" class="col-sm-5 col-form-label">Dealer Discount Basisfahrzeug (%)</label>
                <div class="col-sm-4">
                    <input asp-for="DealerDiscountBasic" class="form-control float-right" />
                    <span asp-validation-for="DealerDiscountBasic" class="text-danger"></span>
                </div>
            </div>
            <div class="row m-1">
                <label class="col-sm-5 col-form-label">Dealer Discount Listenpreis (%)</label>
                <div class="col-sm-4">
                    <input asp-for="DealerDiscountList" class="form-control float-right" />
                    <span asp-validation-for="DealerDiscountList" class="text-danger"></span>
                </div>
            </div>
            <div class="row m-1">
                <label class="col-sm-5 col-form-label">Verbleibende Marge (€)</label>
                <div class="col-sm-4">
                    <input asp-for="Margin" class="form-control float-right" />
                    <span asp-validation-for="Margin" class="text-danger"></span>
                </div>
            </div>
        </div>
    </div>
</form>

Answer 1

根据 Bootstrap 5 migration guide...

float-right 现在是 float-end

没有align-items-rightclass.

Bootstrap 5 navbar align items right

表单中输入字段的右对齐不起作用

Right alignment of input fields in a form does not work

twitter-bootstrap

bootstrap-5