Django结合Bootstrap实现商品列表每4个条目自动换行问题

代码无法实现每行4个商品自动换行，核心是两个Bootstrap用法错误：

• 栅格嵌套不符合规范：Bootstrap栅格系统要求col-*类必须是.row容器的直接子元素，直接把col-3类绑定在card组件上时，栅格宽度计算规则不生效。
• 样式冲突：给card加了style="width: 16rem;"的固定宽度内联样式，优先级高于栅格类的百分比宽度规则，直接覆盖了col-3默认占父容器25%宽度的设定，导致flex布局的自动换行逻辑失效。

不需要额外编写Django模板的换行判断逻辑，只要修正HTML结构和样式，Bootstrap栅格会自动实现满4个（栅格总宽度为12，每个col-3占3份，4个刚好占满一行）就换行的效果：

1. 把col-3类从card元素上移到外层单独的div容器，保证col是row的直接子元素
2. 删除card上的固定宽度内联样式，让card自动撑满外层col容器的宽度
3. 可按需给row加间距类、给card加高度类优化展示效果

修正后的index.html核心代码如下：

<div class="container py-3">
    <h2 align="center"> Top </h2>
</div>
<div class="container py-2 px-1">
    <!-- g-3 控制列之间、上下行之间的间距 -->
    <div class="row g-3">
        {% for p in post %}
        <!-- col-3作为row的直接子元素，每个占3/12宽度，满4个自动换行 -->
        <div class="col-3">
            <!-- h-100让同一行卡片高度保持一致，避免内容长短不一导致布局错乱 -->
            <div class="card h-100">
                <img src="http://placeimg.com/600/600/any" class="card-img-top" alt="商品图">
                <div class="card-body">
                    <h5 class="card-title">{{ p.title }}</h5>
                    <p class="card-text">{{ p.explain }}</p>
                    <p>{{ p.price }}</p>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>

如果需要做响应式适配，比如移动端每行展示1个、平板每行展示2个、桌面端每行展示4个，可以把col的类改成col-12 col-md-6 col-lg-3，自动适配不同屏幕尺寸。

内容的提问来源于stack exchange，提问作者김용석