解决Bootstrap网格布局中按钮超出卡片无法自动换行问题

针对你遇到的按钮超出卡片、空间不足时无法自动换行的问题，可通过调整列的响应式类来解决，具体修改如下：

修改后的代码 #

<div class="row g-1">
        <div class="col-lg-6 mb-3">
            <div class="card shadow">
                <div class="card-body">
                    <h3>Activity</h3>
                    <div class="row g-1 align-items-end">
                        <!-- 为筛选器列添加col作为小屏幕适配类 -->
                        <div class="col-lg-5 col mb-3">
                            <label class="form-label">Location</label>
                            <asp:DropDownList ID="ctLocation" runat="server" CssClass="form-select"></asp:DropDownList>
                        </div>
                        <div class="col-lg-3 col mb-3">
                            <label class="form-label">Start Date</label>
                            <asp:TextBox ID="ctStartDate" runat="server" CssClass="form-control datepicker"></asp:TextBox>
                        </div>
                        <div class="col-lg-3 col mb-3">
                            <label class="form-label">End Date</label>
                            <asp:TextBox ID="ctEndDate" runat="server" CssClass="form-control datepicker"></asp:TextBox>
                        </div>
                        <!-- 按钮列组合col-auto与col-lg-1，实现响应式宽度与自动换行 -->
                        <div class="col-lg-1 col-auto mb-3">
                            <!-- 添加w-100 w-lg-auto优化不同屏幕下的按钮显示 -->
                            <input type="button" id="ctRefresh" class="btn btn-outline-primary w-100 w-lg-auto" value="Refresh" />
                        </div>
                    </div>
                    <hr />
                    <div class="mt-3">
                        <canvas id="dailyTraffic" height="100"></canvas>
                    </div>
                </div>
            </div>
        </div>

关键修改说明 #

• 按钮列的响应式设置：col-auto让按钮列根据自身内容自动计算宽度，当父容器空间不足时，Bootstrap的flex布局会自动将按钮换行到新行；col-lg-1保证在大屏幕（≥992px）时，按钮仍占用1份栅格宽度，维持原有紧凑布局。
• 筛选器列的小屏幕适配：为每个筛选器列添加col类，确保在小屏幕时各列均匀分配可用宽度，避免布局错乱。
• 按钮宽度优化：w-100 w-lg-auto让按钮在小屏幕时占满整行，提升视觉体验；大屏幕时恢复自动宽度，保持原有布局风格。

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