Bootstrap 5 - 带有输入组的浮动标签没有对齐

Question

我在让输入组内的浮动标签对齐时遇到一些问题。

<div class="col-6 mb-3">
    <div class="input-group">
        <div class="form-floating">
            <input asp-for="Email" class="form-control" disabled placeholder="@Html.DisplayNameFor(_ => _.Email)" />
            <label asp-for="Email"></label>
        </div>
            <span class="input-group-text text-success font-weight-bold">✓</span>
    </div>
</div>

<div class="col-6 mb-3">
        <div class="form-floating">
            <input asp-for="Input.NewEmail" class="form-control" placeholder="@Html.DisplayNameFor(_ => _.Input.NewEmail)" />
            <label asp-for="Input.NewEmail"></label>
            <span asp-validation-for="Input.NewEmail" class="text-danger"></span>
        </div>
</div>

我希望旁边带有勾号的顶部字段与下面的字段展开相同的宽度。

我创建了一个 JSFiddle 来演示可以找到的问题 here

Answer 1

在包含输入的同一个 div 上使用 input-group 和 floating-form..

       <div class="col-6 mb-3">
            <div class="input-group form-floating">
                <input class="form-control" disabled placeholder="Email" />
                <label>Email</label>
                <span class="input-group-text text-success font-weight-bold">✓</span>
            </div>
       </div>
       <div class="col-6 mb-3">
            <div class="form-floating">
                <input class="form-control" placeholder="New Email" />
                <label> New Email</label>
                <span asp-validation-for="Input.NewEmail" class="text-danger"></span>
            </div>
       </div>

Demo

Bootstrap 5 - 带有输入组的浮动标签没有对齐

Bootstrap 5 - Floating Labels with input group doesn't line up

razor

bootstrap-5