Bootstrap产品卡片垂直排列问题：如何实现3列布局？

我从Bootstrap官方网站复制了卡片代码，多次修改后输出结果仍呈垂直排列，想知道如何让产品卡片以3列布局展示。

现有代码 #

{% extends 'base.html' %}
{% block content %}
<h1>Products</h1>
<div class="row">
  {% for product in products %}
  <div class="col-sm-4">
    <div class="card" style="width: 18rem;">
      <img src="{{ product.image_url }}" class="card-img-top" alt="..." width="300" height="300">
      <div class="card-body">
        <h5 class="card-title">{{ product.name }}</h5>
        <p class="card-text">${{ product.price }}</p>
        <a href="#" class="btn btn-primary">Add to Cart</a>
      </div>
    </div>
  </div>
  {% endfor %}
</div>
{% endblock %}

当前效果 #

1. 确认Bootstrap CSS已正确引入 #

检查你的base.html文件，确保已经引入Bootstrap的CSS样式文件，没有引入的话栅格系统无法生效。

2. 移除卡片的固定宽度 #

代码中卡片的style="width: 18rem;"是强制固定宽度，会导致列容器无法容纳卡片进而强制换行。移除这个固定宽度，让卡片自适应列的宽度：

<div class="card"> <!-- 去掉style="width: 18rem;" -->
  <!-- 其他内容保持不变 -->
</div>

同时给图片添加object-fit: cover属性，避免图片拉伸变形，保持比例：

<img src="{{ product.image_url }}" class="card-img-top" alt="{{ product.name }}" style="height: 300px; object-fit: cover;">

3. 用container包裹row（Bootstrap 5必备） #

Bootstrap 5的栅格系统要求row必须放在container或container-fluid内部，否则栅格布局不会正常工作。修改后的完整代码如下：

{% extends 'base.html' %}
{% block content %}
<h1>Products</h1>
<div class="container">
  <div class="row">
    {% for product in products %}
    <div class="col-sm-4 mb-3"> <!-- 添加mb-3给卡片增加底部间距 -->
      <div class="card h-100"> <!-- h-100让所有卡片高度一致 -->
        <img src="{{ product.image_url }}" class="card-img-top" alt="{{ product.name }}" style="height: 300px; object-fit: cover;">
        <div class="card-body">
          <h5 class="card-title">{{ product.name }}</h5>
          <p class="card-text">${{ product.price }}</p>
          <a href="#" class="btn btn-primary">Add to Cart</a>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</div>
{% endblock %}

4. 响应式布局优化（可选） #

如果需要适配不同屏幕尺寸，可以替换col-sm-4为响应式类，比如：

• col-12 col-sm-6 col-md-4：手机端1列、平板端2列、桌面端3列
• col-md-4：仅在中等及以上屏幕显示3列

完成以上修改后，产品卡片就能正常以3列布局展示了。

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