如何实现元素数量不同的两行网格控件右侧垂直对齐？

无法让元素数量不同的两行控件对齐，也找不到方法使select组件的右侧与button按钮的右侧垂直对齐。

原始代码 #

<div class="container text-center col-xs-12 col-md-4">
    <div class="row justify-content-md-center mb-3">
        <div class="col-12">
            <select class="form-select" aria-label="Default select example">
                <option selected>Open this select menu</option>
                <option value="1">One</option>
                <option value="2">Two</option>
                <option value="3">Three</option>
            </select>
        </div>

    </div>
    <div class="row justify-content-md-center mb-3">
        <div class="col-10">
            <div id="reportrange">
                <i class="fas fa-calendar"></i>&nbsp;
                <span></span> <i class="fas fa-caret-down"></i>
            </div>
        </div>
        <div class="col-2">
            <button class="btn btn-primary" type="button"><i class="fas fa-search"></i></button>
        </div>

    </div>
</div>

提供两种实现右侧对齐的方案，按需选择：

方案一：自适应宽度对齐 #

通过调整元素的对齐类，让select自动靠右，和按钮右侧对齐：

<div class="container col-xs-12 col-md-4">
    <!-- 第一行：select组件 -->
    <div class="row justify-content-end mb-3">
        <div class="col-12">
            <select class="form-select w-auto ms-auto" aria-label="Default select example">
                <option selected>Open this select menu</option>
                <option value="1">One</option>
                <option value="2">Two</option>
                <option value="3">Three</option>
            </select>
        </div>
    </div>
    <!-- 第二行：日历+按钮 -->
    <div class="row justify-content-end mb-3">
        <div class="col-10">
            <div id="reportrange" class="d-flex align-items-center">
                <i class="fas fa-calendar"></i>&nbsp;
                <span>选择日期范围</span> <i class="fas fa-caret-down"></i>
            </div>
        </div>
        <div class="col-2 d-flex justify-content-end">
            <button class="btn btn-primary" type="button"><i class="fas fa-search"></i></button>
        </div>
    </div>
</div>

关键调整 #

• 给第一行row加justify-content-end，让内部元素靠右
• 给select加w-auto ms-auto，实现宽度自适应并靠右对齐
• 按钮所在列加d-flex justify-content-end，确保按钮靠右

方案二：列结构统一对齐 #

让两行的列布局完全一致，用空列占位保证对齐：

<div class="container col-xs-12 col-md-4">
    <div class="row justify-content-md-center mb-3">
        <div class="col-10">
            <select class="form-select" aria-label="Default select example">
                <option selected>Open this select menu</option>
                <option value="1">One</option>
                <option value="2">Two</option>
                <option value="3">Three</option>
            </select>
        </div>
        <div class="col-2"></div>
    </div>
    <div class="row justify-content-md-center mb-3">
        <div class="col-10">
            <div id="reportrange">
                <i class="fas fa-calendar"></i>&nbsp;
                <span></span> <i class="fas fa-caret-down"></i>
            </div>
        </div>
        <div class="col-2">
            <button class="btn btn-primary" type="button"><i class="fas fa-search"></i></button>
        </div>
    </div>
</div>

关键调整 #

• 第一行同样拆分为col-10+col-2，空col-2占位
• 保持两行列结构完全匹配，自然实现右侧对齐

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