如何将产品卡片对齐为网格布局？前三个已对齐，后续需调整

我一眼就看出问题所在啦——你现在的代码里，每添加一个新卡片就错误地闭合了<div class="row">标签，导致后面的卡片都不在同一个网格容器里，自然排布混乱。Bootstrap的网格系统要求同一行的列（col）必须放在同一个row容器内，这样它才能自动按每行3个（col-md-4）的规则排列。

修复后的完整代码 #

<div class="row">
  <div class="col-md-4 mb-5">
    <h2>Ултразвучни системи:</h2>
  </div>
</div>
<!-- /.row -->
<div class="row">
  <!-- 第一组卡片 -->
  <div class="col-md-4 mb-5 d-flex align-items-stretch">
    <div class="card h-100">
      <img class="card-img-top" src="img\herai10.jpg" alt="">
      <div class="card-body">
        <h4 class="card-title">HERA I10</h4>
        <p class="card-text">Акушерство, Гинекологија.</p>
      </div>
      <div class="card-footer">
        <a href="#" class="btn btn-primary">Спецификации</a>
      </div>
    </div>
  </div>
  <div class="col-md-4 mb-5 d-flex align-items-stretch">
    <div class="card h-100">
      <img class="card-img-top" src="img\heraw10.jpg" alt="">
      <div class="card-body">
        <h4 class="card-title">HERA W10</h4>
        <p class="card-text">Акушерство, Гинекологија.</p>
      </div>
      <div class="card-footer">
        <a href="#" class="btn btn-primary">Спецификации</a>
      </div>
    </div>
  </div>
  <div class="col-md-4 mb-5 d-flex align-items-stretch">
    <div class="card h-100">
      <img class="card-img-top" src="img\rs85.jpg" alt="">
      <div class="card-body">
        <h4 class="card-title">RS85</h4>
        <p class="card-text">Радиологија.</p>
      </div>
      <div class="card-footer">
        <a href="#" class="btn btn-primary">Спецификации</a>
      </div>
    </div>
  </div>
  <!-- 第二组卡片 -->
  <div class="col-md-4 mb-5 d-flex align-items-stretch">
    <div class="card h-100">
      <img class="card-img-top" src="img\WS80A.jpg" alt="">
      <div class="card-body">
        <h4 class="card-title">WS80A with Elite</h4>
        <p class="card-text">Акушерство, Гинекологија.</p>
      </div>
      <div class="card-footer">
        <a href="#" class="btn btn-primary">Спецификации</a>
      </div>
    </div>
  </div>
  <div class="col-md-4 mb-5 d-flex align-items-stretch">
    <div class="card h-100">
      <img class="card-img-top" src="img\rs80a.jpg" alt="">
      <div class="card-body">
        <h4 class="card-title">RS80A with Prestige</h4>
        <p class="card-text">Радиологија.</p>
      </div>
      <div class="card-footer">
        <a href="#" class="btn btn-primary">Спецификации</a>
      </div>
    </div>
  </div>
  <div class="col-md-4 mb-5 d-flex align-items-stretch">
    <div class="card h-100">
      <img class="card-img-top" src="img\hs70a.jpg" alt="">
      <div class="card-body">
        <h4 class="card-title">HS70A with Prime</h4>
        <p class="card-text">Акушерство, Гинекологија, Кардиоваскуларно, Радиологија.</p>
      </div>
      <div class="card-footer">
        <a href="#" class="btn btn-primary">Спецификации</a>
      </div>
    </div>
  </div>
  <!-- 第三组卡片 -->
  <div class="col-md-4 mb-5 d-flex align-items-stretch">
    <div class="card h-100">
      <img class="card-img-top" src="img\hs60.jpg" alt="">
      <div class="card-body">
        <h4 class="card-title">HS60</h4>
        <p class="card-text">Акушерство, Гинекологија, Кардиоваскуларно.</p>
      </div>
      <div class="card-footer">
        <a href="#" class="btn btn-primary">Спецификации</a>
      </div>
    </div>
  </div>
  <div class="col-md-4 mb-5 d-flex align-items-stretch">
    <div class="card h-100">
      <img class="card-img-top" src="img\hs50.jpg" alt="">
      <div class="card-body">
        <h4 class="card-title">HS50</h4>
        <p class="card-text">Акушерство, Гинекологија, Кардиоваскуларно.</p>
      </div>
      <div class="card-footer">
        <a href="#" class="btn btn-primary">Спецификации</a>
      </div>
    </div>
  </div>
  <div class="col-md-4 mb-5 d-flex align-items-stretch">
    <div class="card h-100">
      <img class="card-img-top" src="img\hs40.jpg" alt="">
      <div class="card-body">
        <h4 class="card-title">HS40</h4>
        <p class="card-text">Акушерство, Гинекологија, Кардиоваскуларно.</p>
      </div>
      <div class="card-footer">
        <a href="#" class="btn btn-primary">Спецификации</a>
      </div>
    </div>
  </div>
  <!-- 第四组卡片 -->
  <div class="col-md-4 mb-5 d-flex align-items-stretch">
    <div class="card h-100">
      <img class="card-img-top" src="img\hs30.jpg" alt="">
      <div class="card-body">
        <h4 class="card-title">HS30</h4>
        <p class="card-text">Акушерство, Гинекологија, Кардиоваскуларно.</p>
      </div>
      <div class="card-footer">
        <a href="#" class="btn btn-primary">Спецификации</a>
      </div>
    </div>
  </div>
  <div class="col-md-4 mb-5 d-flex align-items-stretch">
    <div class="card h-100">
      <img class="card-img-top" src="img\hm70a.jpg" alt="">
      <div class="card-body">
        <h4 class="card-title">HM70A with Plus</h4>
        <p class="card-text">Акушерство, Гинекологија, Кардиоваскуларно, Точка на Грижење.</p>
      </div>
      <div class="card-footer">
        <a href="#" class="btn btn-primary">Спецификации</a>
      </div>
    </div>
  </div>
  <div class="col-md-4 mb-5 d-flex align-items-stretch">
    <div class="card h-100">
      <img class="card-img-top" src="img\h60.jpg" alt="">
      <div class="card-body">
        <h4 class="card-title">H60</h4>
        <p class="card-text">Акушерство, Гинекологија.</p>
      </div>
      <div class="card-footer">
        <a href="#" class="btn btn-primary">Спецификации</a>
      </div>
    </div>
  </div>
  <!-- 第五组卡片 -->
  <div class="col-md-4 mb-5 d-flex align-items-stretch">
    <div class="card h-100">
      <img class="card-img-top" src="img\sonoacer7.jpg" alt="">
      <div class="card-body">
        <h4 class="card-title">Sonoace R7</h4>
        <p class="card-text">Акушерство, Гинекологија.</p>
      </div>
      <div class="card-footer">
        <a href="#" class="btn btn-primary">Спецификации</a>
      </div>
    </div>
  </div>
</div>
<!-- /.row -->

关键修复点 #

• 把所有产品卡片的<div class="col-md-4">都放在同一个<div class="row">容器里，Bootstrap会自动计算每行容纳3个col-md-4（因为12列网格，4*3=12），超出后自动换行。
• 移除了原来每个卡片后面多余的</div>（也就是错误闭合row的标签），避免破坏网格结构。
• 保留了你原来的d-flex align-items-stretch和card h-100类，确保所有卡片高度一致，不会出现参差不齐的情况。

这样修改后，所有卡片就会和前三个一样，整齐地排成每行3个的网格布局啦！

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