Bootstrap равные высоты абзаца - PullRequest
Новая
       18

Bootstrap равные высоты абзаца

0 голосов
/ 14 апреля 2020

Я использую PHP, чтобы составить меню тортов, которые мы продаем, и я использую bootstrap карты для их оформления.

У меня есть почти идеальные карты, однако некоторые из них имеют более длинные описания, чем другие, поэтому содержимое внутри не всегда выстраивается красиво и аккуратно (как на картинке). enter image description here

Вот основа HTML, которая у меня есть 

  <div class='container'>
<div class="row">

<div class=\ "col-sm-4 d-flex align-items-stretch \">
  <div class=\ "card\">
    <img class=\ "card-img-top\" src='' alt='Picture'>
    <div class=\ "card-body\">
      <h5 class=\ "card-title\">{$row['Name']}</h5>
      <p class=\ "card-text  \">{$row['Description']}</p>
      <ul class=\ "list-group list-group-flush text-center \">
        <li class='list-group-item d-flex justify-content-between '> <span> {$row2['Size']} Inch</span> <span>{$row2['Count']} - in stock</span></li>
    </div>
  </div>
</div>
  </div>
  
    </div>

Есть ли способ расширить абзац для элементов с меньшим описанием, чтобы все элементы списка начинались в одном и том же месте?

I ' м. в настоящее время использует flex stretch, чтобы гарантировать, что все карточки имеют одинаковую высоту в каждом ряду, однако это дает результат, когда карточки имеют одинаковую высоту, но содержимое не выровнено.

Заранее спасибо за любые предложения.

...