Bootstrap卡片无法正常网格排列，如何实现商品列表一行3张卡片布局？

问题根本原因 #

• Bootstrap版本不兼容：你引入的CSS是Bootstrap 5.1.0版本，但配套的JS用的是Bootstrap 4.4.1版本，跨大版本的资源混用会直接导致网格布局、组件样式失效。
• 栅格类配置错误：Bootstrap默认是12列栅格系统，要实现一行3张卡片，每列需要占4份宽度，你设置的col-3是一行4张的配置，同时响应式类的书写顺序错误（应该从最小断点往大写）。
• HTML标签嵌套错误：你的代码里.card-body的闭合标签放在了<form>标签外部，错误的嵌套结构会破坏卡片的默认样式，撑坏列宽导致布局换行。

修改方案 #

1. 修正base.html的Bootstrap资源引入

删掉原有3个JS引用，替换为Bootstrap5官方配套的JS bundle，不需要单独引入jQuery和popper：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

2. 修正shop.html的布局代码

修正栅格类、标签嵌套问题，也可以直接用Bootstrap5的行列配置实现更稳定的布局效果：

{% extends 'base.html' %} 

{% block content %} 
<div class="container">
  <!-- Product List -->
  <br>
  <h2 class="text-center">List of Products</h2>
  <br>
  <!-- row-cols-sm-3直接指定小屏及以上一行显示3个卡片，g-4设置卡片间距 -->
  <div class="row row-cols-1 row-cols-sm-3 g-4">
  {% for product in products %} 
  <div class="col">
    <div class="card h-100"> <!-- h-100让所有卡片高度统一 -->
      <form method="POST" action="{% url 'add_to_cart' product.id %}">
        {% csrf_token %} 
        <img src="{{ product.image.url }}" class="card-img-top" alt="{{ product.name }}">
        <div class="card-body">
          <h5 name="item" class="card-title">{{product.name}}</h5>
            <div class="card-text">
                <p>Category: {{ product.category }}</p>
                <p>Price:</p>
                <p style="text-decoration: line-through;color:red;">{{ product.price }}</p>
                <p style="color:blue;">{{ product.discount_price }}</p>
            </div>
            <hr>
            <input name="quantity" type="number" value="1" class="mb-2">
            <input type="submit" class="btn btn-primary" value="Add to Cart">
        </div> <!-- 将card-body闭合标签移到form内部，修正嵌套错误 -->
      </form>
    </div>
  </div>
  {% endfor %}
</div> 
</div>
  
{% endblock %}

如果不想用行列配置写法，也可以把列的类改成col-12 col-sm-4，同样能实现小屏以上一行3个卡片的效果。

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