如何用DIV和标签在Bootstrap 5中使提交按钮对齐下拉框右侧

要让提交按钮位于Country下拉框右侧而非与标签同排，只需调整Bootstrap的列布局，将按钮与Country下拉框放在同一列内，并通过flex布局实现横向排列：

修改后的代码 #

<div class="container border">
    <div class="col-12 p-3">
        <form>
            <div class="row">
                <div class="col-md-4">
                    <label class="form-label">Continent</label>
                    <select class="form-control" asp-for="ContinentId" asp-items="Model.Continents">
                        <option value="">Select Continent</option>
                    </select>
                </div>
                <div class="col-md-8 d-flex align-items-end gap-2">
                    <div class="flex-grow-1">
                        <label class="form-label">Country</label>
                        <select class="form-control" asp-for="CountryId"></select>
                    </div>
                    <button type="submit" class="btn btn-primary btn-sm">Display Airports</button>
                </div>
            </div>
        </form>
    </div>
</div>

关键调整说明 #

• 调整栅格列宽度：将原Country列的col-md-4改为col-md-8，同时把按钮移入该列，保证两列总宽度符合Bootstrap 12列栅格规则
• 启用flex布局：给Country列添加d-flex，让内部元素横向排列；搭配align-items-end让按钮与下拉框底部对齐，视觉更协调
• 分配空间：用flex-grow-1包裹Country的标签和下拉框，确保下拉框占满列内剩余空间，按钮仅占用自身宽度
• 增加间距：gap-2给下拉框和按钮之间添加合适间距，也可替换为ms-2（仅给按钮添加左边距）

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