Bootstrap布局问题：如何让列内卡片居中并统一卡片尺寸？

针对你遇到的卡片在列内不居中、宽高不一致的问题，这里有一套简单的解决方案，用Bootstrap内置类和少量CSS就能轻松搞定：

一、让卡片在col-4列内居中 #

你现在给卡片加了style="width: 18rem;"固定宽度，而col-4的宽度在不同屏幕下是动态变化的，这就导致卡片偏左，右侧留出空白。有两种处理方式：

方式1：用Bootstrap flex类实现水平居中 #

给每个col-4添加d-flex justify-content-center类，列内的卡片就会自动水平居中：

<div class="col-4 d-flex justify-content-center">
  <div class="card text-center" style="width: 18rem;">
    <!-- 卡片内容 -->
  </div>
</div>

方式2：去掉固定宽度，让卡片自适应列宽 #

如果不需要固定18rem的宽度，直接删掉卡片的style="width: 18rem;"，卡片会自动填充整个col-4的宽度，自然就没有右侧空白了：

<div class="col-4">
  <div class="card text-center">
    <!-- 卡片内容 -->
  </div>
</div>

二、让所有卡片保持相同的宽高 #

图片尺寸不一致是导致卡片高度差异的核心原因，再加上内容长度可能不同，我们可以结合Bootstrap类和CSS来统一：

1. 统一图片显示区域高度 #

给card-img-top设置固定高度，并添加object-fit: cover属性——既保证图片区域高度一致，又能让图片按比例填充不拉伸变形：

<img src="imgs\products\cameras\1.jpg" class="card-img-top" alt="..." style="height: 12rem; object-fit: cover;">

更推荐把样式写到CSS文件里（避免内联样式冗余）：

.card-img-top {
  height: 12rem;
  object-fit: cover;
}

2. 让按钮固定在卡片底部 #

给card-body添加d-flex flex-column，再给按钮加mt-auto，这样不管标题和价格的长度如何，按钮都会固定在卡片底部，同时卡片高度会自动统一：

<div class="card-body d-flex flex-column">
  <h5 class="card-title">Canon EOS Rebel T7</h5>
  <p class="card-text">Price : Rs. 37000.00</p>
  <a href="#" class="btn btn-primary btn-block mt-auto">Add to cart</a>
</div>

3. 额外保障：让卡片占满列高度 #

给每个card添加h-100类，确保卡片高度和所在列的高度完全一致，配合上面的设置，就能完美统一所有卡片的高度：

<div class="card text-center h-100">
  <!-- 卡片内容 -->
</div>

完整修改后的代码示例 #

方案1：保留卡片固定宽度+居中 #

<div class="container">
  <div class="row">
    <div class="col-4 d-flex justify-content-center">
      <div class="card text-center h-100" style="width: 18rem;">
        <img src="imgs\products\cameras\1.jpg" class="card-img-top" alt="..." style="height: 12rem; object-fit: cover;">
        <div class="card-body d-flex flex-column">
          <h5 class="card-title">Canon EOS Rebel T7</h5>
          <p class="card-text">Price : Rs. 37000.00</p>
          <a href="#" class="btn btn-primary btn-block mt-auto">Add to cart</a>
        </div>
      </div>
    </div>
    <div class="col-4 d-flex justify-content-center">
      <div class="card text-center h-100" style="width: 18rem;">
        <img src="imgs\products\cameras\2.jpg" class="card-img-top" alt="..." style="height: 12rem; object-fit: cover;">
        <div class="card-body d-flex flex-column">
          <h5 class="card-title">Fujifilm X-T3</h5>
          <p class="card-text">Price : Rs. 34000.00</p>
          <a href="#" class="btn btn-primary btn-block mt-auto">Add to cart</a>
        </div>
      </div>
    </div>
    <div class="col-4 d-flex justify-content-center">
      <div class="card text-center h-100" style="width: 18rem;">
        <img src="imgs\products\cameras\3.jpg" class="card-img-top" alt="..." style="height: 12rem; object-fit: cover;">
        <div class="card-body d-flex flex-column">
          <h5 class="card-title">Nikon D5600</h5>
          <p class="card-text">Price : Rs. 43000.00</p>
          <a href="#" class="btn btn-primary btn-block mt-auto">Add to cart</a>
        </div>
      </div>
    </div>
  </div>
</div>

方案2：卡片自适应列宽（更简洁） #

<div class="container">
  <div class="row">
    <div class="col-4">
      <div class="card text-center h-100">
        <img src="imgs\products\cameras\1.jpg" class="card-img-top" alt="..." style="height: 12rem; object-fit: cover;">
        <div class="card-body d-flex flex-column">
          <h5 class="card-title">Canon EOS Rebel T7</h5>
          <p class="card-text">Price : Rs. 37000.00</p>
          <a href="#" class="btn btn-primary btn-block mt-auto">Add to cart</a>
        </div>
      </div>
    </div>
    <!-- 另外两个卡片结构同上 -->
  </div>
</div>

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