Bootstrap 4: попытка выровнять содержимое внутри карты справа внизу - PullRequest
Новая
       57

Bootstrap 4: попытка выровнять содержимое внутри карты справа внизу

0 голосов
/ 26 января 2019

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

enter image description here

Это мой код: 

<div class="col-sm-3  text-right my-auto">
  <div class="card text-white text-right d-flex">
    <img src="images\col_img_2.jpeg" class="card-img" alt="...">
    <div class="card-img-overlay justify-items-end d-flex align-items-end">
      <h5 class="card-title">Project 2</h5>
      <a href="#" class="btn btn-primary">Lees verder</a>
    </div>
  </div>
</div>
</div>

И вот результат:

enter image description here

Кто-нибудь знает, как это исправить? Заранее благодарим за вашу доброту!

1 Ответ

0 голосов
/ 26 января 2019

Я понял это. Я исправил это, используя mt-auto для элемента 'h5'! Это сдвигает элемент 'h5' и элемент 'a' внизу карты. 

<div class="col-sm-3  text-right my-auto">
  <div class="card text-white text-right d-flex">
   <img src="images\col_img_2.jpeg" class="card-img" alt="...">
    <div class="card-img-overlay d-flex align-items-end flex-column">
      <h5 class="card-title mt-auto">Project 2</h5>
      <a href="#" class="btn btn-primary">Lees verder</a>
    </div>
  </div>
</div>
...