如何在单个Bootstrap卡片中将3张图片横向并排对齐

问题原因 #

• 网格列宽配置错误：Bootstrap的行（row）默认按12列拆分，你给每个列设置了col-md-6，单块占6列宽度，2个列就占满了整行空间，第三个列自然会被挤到下一行。
• HTML结构嵌套错误：你把第三个列容器直接写在了第二个col-md-6的内部，三个列容器应该为平级关系，统一作为row的直接子元素。
• 缺少外层卡片容器：如果要把所有内容放在单个Bootstrap卡片内，需要先在外层套上带card类的容器。

修复方案 #

把三个列的类改成col-md-4（每块占4列，3块刚好占满12列），修正嵌套结构，外层补全卡片容器即可，修正后的代码如下：

<div class="card">
  <div class="card-body">
    <div class="text-center">
      <div class="col-md-12">Club Hiarchy:</div>
      <div class="row g-3"> <!-- g-3是列间距，可按需调整 -->
        <!-- 第一个卡片项 -->
        <div class="col-md-4">
          <a href="#">
            <img src="./Pictures/BM.jpg" alt="css_logo" class="img-fluid">
          </a>
          <div class="mt-2">
            <h5 class="card-title">Rod little</h5>
            <p class="card-text">freddrf34 trrfefwerrf frewferfrf erf ref</p>
          </div>
        </div>
        <!-- 第二个卡片项 -->
        <div class="col-md-4">
          <a href="#">
            <img src="./Pictures/TM.jpg" alt="ccs_logo" class="img-fluid">
          </a>
          <div class="mt-2">
            <h5 class="card-title">Rod little</h5>
            <p class="card-text">freddrf34 trrfefwerrf frewferfrf erf ref</p>
          </div>
        </div>
        <!-- 第三个卡片项 -->
        <div class="col-md-4">
          <a href="#">
            <img src="./Pictures/TM.jpg" alt="ccs_logo" class="img-fluid">
          </a>
          <div class="mt-2">
            <h5 class="card-title">Rod little</h5>
            <p class="card-text">freddrf34 trrfefwerrf frewferfrf erf ref</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

如果要适配更小的屏幕，可以额外加更小尺寸的列类，比如col-6 col-md-4，实现小屏2个一行，中屏及以上3个一行的效果。

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