Bootstrap表单列与提交按钮间多余空白消除求助

问题原因 #

提交按钮和两列处于同一个row flex容器中，row的g-4类会给所有子元素（包括按钮）添加间距；同时你给列内的div设置了h-25类，但该类依赖父元素的明确高度才能生效，当前父元素未设置高度，导致h-25无效，反而可能让列的高度被不必要地撑开，进一步加剧空白问题。

有效解决方案 #

方案1：将按钮移出row容器 #

把提交按钮放到row外面，用margin类控制和上方内容的间距，避免row的gap影响按钮：

<form method="GET" action=".">
    <div class="container-fluid pt-2 px-5 py-3">
        <div class="row g-4">
            <div class="col-sm-12 col-xl-6 py-xl-2">
                <div class="bg-secondary rounded p-4">
                    <h6 class="mb-3">Symbol</h6>
                    <select name="symbol" class="form-select form-select-sm mb-3" aria-label=".form-select-sm example">
                        <option value="">All Symbols</option>
                        {% for sym in used_symbols %}
                        <option value={{sym}}>{{sym}}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="bg-secondary rounded p-4 mt-2">
                    <h6 class="mb-3">Side</h6>
                    <select name="side" class="form-select form-select-sm mb-3" aria-label=".form-select-sm example">
                        <option value="">All</option>
                        <option value='l'>Long</option>
                        <option value='s'>Short</option>
                    </select>
                </div>
                <div class="bg-secondary rounded p-4 mt-2">
                    <h6 class="mb-3">Status</h6>
                    <select name="status" class="form-select form-select-sm mb-3" aria-label=".form-select-sm example">
                        <option value="">All</option>
                        <option value='l'>Win</option>
                        <option value='s'>Loss</option>
                        <option value='d'>Draw</option>
                        <option value='o'>Open</option>
                    </select>
                </div>
            </div>
            <div class="col-sm-12 col-xl-6 py-xl-2">
                <div class="bg-secondary rounded p-4">
                    <h6 class="mb-4">Check, Radio & Switch</h6>
                </div>
                <div class="bg-secondary rounded p-4 mt-2">
                    <h6 class="mb-4">Check, Radio & Switch</h6>
                </div>
                <div class="bg-secondary rounded p-4 mt-2">
                    <h6 class="mb-4">Check, Radio & Switch</h6>
                </div>
            </div>
        </div>
        <!-- 按钮移到row外面，用mt-4控制间距 -->
        <button type="submit" class="btn btn-primary mt-4">Search</button>
    </div>
</form>

方案2：给按钮单独分配一列 #

在row中新增一个col-12的列放置按钮，利用Bootstrap网格系统精确控制位置，避免row的gap带来不必要间距：

<form method="GET" action=".">
    <div class="container-fluid pt-2 px-5 py-3">
        <div class="row g-4">
            <div class="col-sm-12 col-xl-6 py-xl-2">
                <div class="bg-secondary rounded p-4">
                    <h6 class="mb-3">Symbol</h6>
                    <select name="symbol" class="form-select form-select-sm mb-3" aria-label=".form-select-sm example">
                        <option value="">All Symbols</option>
                        {% for sym in used_symbols %}
                        <option value={{sym}}>{{sym}}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="bg-secondary rounded p-4 mt-2">
                    <h6 class="mb-3">Side</h6>
                    <select name="side" class="form-select form-select-sm mb-3" aria-label=".form-select-sm example">
                        <option value="">All</option>
                        <option value='l'>Long</option>
                        <option value='s'>Short</option>
                    </select>
                </div>
                <div class="bg-secondary rounded p-4 mt-2">
                    <h6 class="mb-3">Status</h6>
                    <select name="status" class="form-select form-select-sm mb-3" aria-label=".form-select-sm example">
                        <option value="">All</option>
                        <option value='l'>Win</option>
                        <option value='s'>Loss</option>
                        <option value='d'>Draw</option>
                        <option value='o'>Open</option>
                    </select>
                </div>
            </div>
            <div class="col-sm-12 col-xl-6 py-xl-2">
                <div class="bg-secondary rounded p-4">
                    <h6 class="mb-4">Check, Radio & Switch</h6>
                </div>
                <div class="bg-secondary rounded p-4 mt-2">
                    <h6 class="mb-4">Check, Radio & Switch</h6>
                </div>
                <div class="bg-secondary rounded p-4 mt-2">
                    <h6 class="mb-4">Check, Radio & Switch</h6>
                </div>
            </div>
            <!-- 新增列放置按钮 -->
            <div class="col-12">
                <button type="submit" class="btn btn-primary">Search</button>
            </div>
        </div>
    </div>
</form>

额外优化点 #

• 移除所有h-25类，该类在父元素无明确高度的场景下只会导致布局混乱。
• 修正status下拉框的重复value='s'问题，改为d（Draw）和o（Open），避免功能异常。

内容的提问来源于stack exchange，提问作者Amir mohammad Sedaghat nia