Flask+Jinja2+Bootstrap网格布局：如何按断点切换为2列

你当前的布局在窗口缩小后变成1列，是因为只用了col-md-3这个Bootstrap类——它仅在屏幕宽度≥768px（md断点）时生效，低于这个宽度时列会默认占满整行。要实现特定断点切换为2列，只需添加对应的响应式列类，这里推荐两种更合理的实现方式：

方案一：基于现有代码修改（保留batch过滤器） #

给列容器添加col-sm-6类，这样在屏幕宽度≥576px（sm断点）时显示2列，≥768px时自动切换为4列：

<div class="container-fluid justify-content-start">
    {% for row in db | batch(4) %}
        <div class="row align-items-start">
        {% for column in row %}
            <!-- 添加col-sm-6，实现sm断点及以上显示2列 -->
            <div class="col-sm-6 col-md-3 p-2">
                <div class="card" style="max-width: fit-content">
                    <div class="card-body">
                        <img class="card-img-top" style="max-width: 300px" src="{{ column.img }}" alt="{{ column.name }}.img">
                        <!-- 修正：h5标签不能直接加href，需嵌套a标签 -->
                        <a href="/"><h5 class="card-title">{{ column.name }}</h5></a>
                        <a class="btn btn-sm btn-primary stretched-link" href="/services">Add to Cart</a>
                    </div>
                </div>
            </div>
        {% endfor %}
        </div>
    {% endfor %}
</div>

方案二：更优雅的实现（去掉batch过滤器） #

Bootstrap的row本身支持自动换行，不需要手动用batch分组行。直接用单个row包裹所有列，响应式逻辑会更自然：

<div class="container-fluid">
    <div class="row align-items-start">
        {% for column in db %}
            <div class="col-sm-6 col-md-3 p-2">
                <div class="card" style="max-width: fit-content">
                    <div class="card-body">
                        <img class="card-img-top" style="max-width: 300px" src="{{ column.img }}" alt="{{ column.name }}.img">
                        <a href="/"><h5 class="card-title">{{ column.name }}</h5></a>
                        <a class="btn btn-sm btn-primary stretched-link" href="/services">Add to Cart</a>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
</div>

这种方式下，sm断点（≥576px）每行显示2列，md断点（≥768px）每行显示4列，窗口继续缩小到sm以下时自动变成1列，完全符合Bootstrap的响应式设计逻辑。

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