Bootstrap 4: почему это не выровнено по дну?

Question

У меня есть карточка и в ней изображение, а затем заголовок.Затем я хочу получить абзац и ссылку полностью внизу карты.Я определил минимальную высоту в CSS, чтобы освободить место для этого.Тем не менее, следующий код просто течет сверху вниз с пробелом внизу вместо содержимого там.

            <div class="col-lg-4">
                <div class="card shadow">
                    <img class="card-img-top" src="https://source.unsplash.com/random/1600x900?house" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title text-center">47 Dream Homes You'll Wish You Could Afford</h5>
                        <div class="text-center d-block align-items-end">
                            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione!.</p>
                            <a href="#" class="btn btn-primary">Go somewhere</a>
                        </div>
                    </div>
                </div>
            </div>

Вот как это выглядит, и я хочу, чтобы lorem ipsum и кнопка были прямо вверху снизус заголовком вверху.

Answer 1

Позвольте мне предложить альтернативное решение; тот, который не требует дополнительного CSS и вместо этого полагается на существующую платформу Bootstrap. Класс .card-footer является частью компонента Card и может очень хорошо интегрироваться с желаемыми результатами.

Для достижения равных высот вы можете положиться либо на .card-deck, либо просто применив класс .h100 к оболочке .card. Поскольку неясно, как вы можете применять этот дизайн для нескольких карт, в приведенном ниже примере используется .h100:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row">
  
    <div class="col-sm-6 col-lg-4">
      <div class="card h-100 shadow">
        <img class="card-img-top" src="https://source.unsplash.com/random/1600x900?house" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title text-center">47 Dream Homes You'll Wish You Could Afford</h5>
        </div>

        <div class="card-footer bg-white border-top-0 text-center">
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione!.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>

    <div class="col-sm-6 col-lg-4">
      <div class="card h-100 shadow">
        <img class="card-img-top" src="https://source.unsplash.com/random/1600x900?house" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title text-center">47 Dream Homes You'll Wish You Could Afford</h5>
        </div>

        <div class="card-footer bg-white border-top-0 text-center">
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione!</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
       
    <div class="col-sm-6 col-lg-4">
      <div class="card h-100 shadow">
        <img class="card-img-top" src="https://source.unsplash.com/random/1600x900?house" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title text-center">47 Dream Homes You'll Wish You Could Afford</h5>
        </div>

        <div class="card-footer bg-white border-top-0 text-center">
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione!</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>

  </div>
</div>

Теперь по умолчанию .card-footer применяет верхнюю границу, а также немного темный фон. Мы можем переопределить эти стили, применив .bg-white для изменения цвета фона и .border-top-0 для удаления верхней границы. Нет смысла объявлять его блочным элементом, а центрирование текста так же просто, как применение .text-center.

Нет min-height Включен CSS.

Для получения дополнительной информации о том, как компонент Card может быть сгруппирован, пожалуйста, просмотрите Документацию Bootstrap 4.x по Layer карты

Answer 2

Вы должны сделать card-body гибким столбцом, а затем выровнять, используя служебный класс Bootstrap, чтобы сдвинуть элементы вниз.

Утилиты Bootstrap Flex

Итак, мы применяем .d-flex и .flex-column к .card-body div и .mt-auto к div, содержащему ваш абзац и кнопку.

.card {
  height: 600px;
  /* artificial height */
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-lg-4">
      <div class="card shadow">
        <img class="card-img-top" src="https://source.unsplash.com/random/1600x900?house" alt="Card image cap">
        <div class="card-body d-flex flex-column">
          <h5 class="card-title text-center">47 Dream Homes You'll Wish You Could Afford</h5>
          <div class="text-center d-block mt-auto">
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione!.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>