Bootstrap布局中如何让Excel Export按钮与文本框底部对齐？

要让右侧的Excel Export按钮与左侧文本框底部对齐，利用Bootstrap自带的Flexbox工具类就能快速实现，以下是两种可行方案：

方案一：给右侧列添加align-self-end类 #

Bootstrap的.row默认是Flex容器，给右侧的列添加align-self-end类，可让该列在垂直方向上对齐到容器底部：

修改后的核心代码片段：

<div class="card-body">
    <div class="row">
        <div class="col-md-10">
            <!-- 左侧表单内容保持不变 -->
        </div>
        <!-- 添加align-self-end类 -->
        <div class="col-md-auto align-self-end">
            <div class="row">
                <button class="btn btn-outline-success">Excel Export</button>
            </div>
        </div>
    </div>
</div>

方案二：给按钮所在行添加mt-auto类 #

如果希望按钮在自身列内底部对齐，可给按钮外层的.row添加mt-auto类，通过自动margin将按钮推到列的底部：

修改后的核心代码片段：

<div class="card-body">
    <div class="row">
        <div class="col-md-10">
            <!-- 左侧表单内容保持不变 -->
        </div>
        <div class="col-md-auto">
            <!-- 添加mt-auto类 -->
            <div class="row mt-auto">
                <button class="btn btn-outline-success">Excel Export</button>
            </div>
        </div>
    </div>
</div>

完整修改后的代码（以方案一为例） #

<div class="card-body">
    <div class="row">
        <div class="col-md-10">
            <form id="bookform">
                <div class="row">
                    <div class="col">
                        <label for="datefrom" class="form-label">Date From</label>
                        <input id="datefrom" name="datafrom" type="text">
                    </div>
                    <div class="col">
                        <label for="dateto" class="form-label">Date To</label>
                        <input id="dateto" name="dateto" type="text">
                    </div>
                    <div class="col-2">
                        <label for="bookname" class="form-label">Book Name</label>
                        <input id="bookname" name="bookname" type="text">
                    </div>
                    <div class="col-2">
                        <label for="batchno" class="form-label">Batch No</label>
                        <input id="batchno" name="batchno" type="text">
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <label for="address" class="form-label">Address</label>
                        <input id="address" name="address" type="text">
                    </div>
                </div>
            </form>
        </div>
        <div class="col-md-auto align-self-end">
            <div class="row">
                <button class="btn btn-outline-success">Excel Export</button>
            </div>
        </div>
    </div>
</div>

原理说明 #

• align-self-end：作用于Flex容器的子元素，强制该元素在交叉轴（垂直方向）上对齐到容器的底部，适用于让整个列和左侧内容底部对齐。
• mt-auto：利用Flexbox的margin自动分配特性，让元素的顶部margin自动填充剩余空间，从而将元素推到父容器的底部，适用于让按钮在自身列内底部对齐。

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