如何将这些产品卡与网格对齐？

Question

我需要将这些项目调整为网格，前三个已对齐，但以下所有内容the first three are perfectly aligned 我想像前三张一样对齐其余的卡。如果有人可以帮助我，我将不胜感激。 谢谢。这是下面的代码。

  

<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>

      <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>

      <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>
      <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>

          <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>
<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>
    <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>
    <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>
        <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>
            <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>
    <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 -->

  

Answer 1

还有一个额外的 <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> 结束标记，导致对齐方式中断。

{{1}}