Bootstrap 5中如何将‘Create New’按钮右对齐并与表格末端对齐？

问题分析 #

你当前的布局中，按钮所在的col-9未启用flex布局来控制对齐，且Bootstrap 5已弃用float-right，改用float-end。同时需要确保按钮所在行与表格的宽度保持一致，避免错位。

修改方案 #

1. 给按钮所在的col-9添加d-flex justify-content-end类，将该列转为flex容器并让子元素（按钮）靠右对齐
2. 给外层row添加align-items-center，让标题与按钮垂直居中对齐，提升视觉协调性
3. 确保表格占满父容器宽度，与上方行保持一致
4. 分页部分替换float-right为Bootstrap 5规范的float-end

修改后的代码 #

<div class="border backgroundWhite">
    <div class="row align-items-center">
        <div class="col-3">
            <h2 class="text-info">Environment List</h2>
        </div>
        <div class="col-9 d-flex justify-content-end">
            <partial name="_CreateButtonPartial" />
        </div>
    </div>
    <br />
    @if (Model.Data.Count() > 0)
    {
        <table class="table table-striped border w-100">
            <tr class="table-secondary">
                <th>Environment</th>
                <th></th>
                <th></th>
            </tr>
            @foreach (var item in Model.Data)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(m => item.Environment)
                    </td>
                    <td>
                        <partial name="_TableButtonPartial" model="item.Id" />
                    </td>
                </tr>
            }
        </table>
        <div page-model="@Model.DataPaging" page-classes-enabled="true" page-class="btn border"
             page-class-normal="btn btn-light" page-class-selected="btn btn-info active"
             class="btn-group float-end">
        </div>
        <br />
    }
    else
    {
        <p>No environment exists....</p>
    }
</div>

额外检查点 #

• 确认_CreateButtonPartial中的按钮没有添加float-left等会干扰对齐的类
• 如果外层border backgroundWhite容器有自定义padding，无需调整，row和表格会自动继承容器内宽度，保持对齐一致

内容的提问来源于stack exchange，提问作者user351479