Как выровнять элемент в конце карты по центру (используя bootstrap 4)? - PullRequest
Новая
       28

Как выровнять элемент в конце карты по центру (используя bootstrap 4)?

1 голос
/ 29 апреля 2020

У меня длинная карта bootstrap с двумя строками информации, заголовком и описанием. Тогда я бы хотел кнопку, расположенную справа от этой карты, по центру. Мой текущий html выглядит следующим образом для кнопки: 

<div class="card card-body">
  <h4>I'm a Card</h4>
  <p>The button should be central, at the end of this card.</p>
  <input type="button"
        class="btn btn-outline-primary align-self-end"
        value=".align-self-end">
</div>

Codepen: https://codepen.io/Darlton29/pen/ZEbyNXe

Как видите, кнопка расположена внизу карты, вызывающей увеличение ее высоты. Как я могу убедиться, что он всегда в конце, в центре карты, и не увеличивает высоту карты? Спасибо.

1 Ответ

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

Добавьте flex-direction: row на карту, добавьте контейнер для содержимого и на кнопке измените align-self-end на align-self-center. 

.mycard {
  flex-direction: row!important;
  justify-content: space-between;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="card card-body mycard">
        <div>
          <h4>I'm a Card</h4>
          <p>
            The button should be central, at the end of this card.
          </p>
        </div>
        <input type="button" class="btn btn-outline-primary align-self-center" value="Button">
      </div>
    </div>
  </div>
...