如何实现Bootstrap行内表单随窗口动态布局，优先在表格右侧堆叠？

问题出在使用float: left实现并排布局时，表单容器是作为一个整体判断剩余空间的——只要容器整体宽度超出可用空间，就会被挤到下方，不会优先让表单内部元素堆叠。要实现「表单先在表格右侧垂直堆叠，空间不足时再整体下移」的效果，推荐用Bootstrap自带的响应式网格+Flex布局替代float，具体步骤如下：

1. 重构布局结构，用Bootstrap网格替代float #

把表格和表单容器放在同一个.row容器内，通过Bootstrap的列分配类控制两者的宽度占比，实现响应式并排：

<!-- 外层Flex容器，用Bootstrap row实现 -->
<div class="row">
    <!-- 表格容器：中等屏幕及以上占8列，小屏幕自动占满整行 -->
    <div class="table-container col-md-8">
        <!-- 你的表格代码 -->
        <table class="table">
            <!-- 表格内容 -->
        </table>
    </div>

    <!-- 表单容器：中等屏幕及以上占4列，小屏幕自动占满整行 -->
    <div class="submission col-md-4">
        <form action="/funds" method="post" class="form-inline">
            <div class="form-group mb-2">
                <select name="group" class="custom-select">
                    <option disabled selected value="">Select an option</option>
                    {% for group in groups %}
                        <option value="{{ group }}">{{ group }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group mx-sm-4 mb-2">
                <input type="text" name="amt" placeholder="Amount" class="form-control">
            </div>
            <div class="form-group mb-2">
                <input type="submit" value="Update Funds" class="btn btn-primary">
            </div>
        </form>
    </div>
</div>

2. 修改表单容器CSS，移除float #

删掉原有的float: left，改用Bootstrap自带的间距类控制位置，避免自定义样式破坏响应式逻辑：

.submission {
    /* 移除float: left */
    padding-top: 10vh;
    /* 可选：替换成Bootstrap的mt-4类，更符合框架规范 */
    /* margin-left: 2vw; 可选：替换成ml-3类 */
}

3. 自定义表单内部堆叠时机 #

Bootstrap的form-inline默认在屏幕宽度小于576px（sm断点）时，让表单元素垂直堆叠。如果需要调整堆叠的断点，可添加自定义媒体查询：

/* 自定义断点：屏幕宽度小于992px时，表单元素强制垂直堆叠 */
@media (max-width: 991px) {
    .submission .form-inline {
        flex-direction: column;
        align-items: flex-start;
    }
    .submission .form-group.mx-sm-4 {
        margin-left: 0 !important;
        margin-top: 0.5rem;
    }
}

原理说明 #

• Bootstrap的.row是Flex容器，子列（.col-*）默认并排排列；当屏幕宽度小于断点（如md对应的768px）时，列会自动换行占满整行，实现「空间不足时表单移到表格下方」的效果。
• 表单内部的form-inline会在小屏幕下自动垂直堆叠，或通过自定义媒体查询调整堆叠时机，满足「先在表格右侧垂直堆叠表单元素」的需求。

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