Карточки одинаковой высоты в Bootstrap

Рейтинг: 0Ответов: 1Опубликовано: 14.05.2023

По заданию требуется используя сетку Bootstrap 4 создать секцию с 4 карточками одинаковой высоты с картинкой в верхней части, и кнопкой, прижатой к нижнему краю карточки. Я применил к блокам card и card-body display: flex; flex-direction: column; min-height: 100%; а к кнопке * margin-top: auto;*, но это не сработало.

.list-reset {
    margin: 0;
    padding: 0;
    list-style: none;
}

.list-row   {
    margin-left: -15px;
    margin-right: -15px; 
}

.row-item:not(:last-child){
    margin-bottom: 30px;
}

.card   {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background-color: beige;
    border-radius: 20px;
    overflow: hidden;
}

.card_top   {
    position: relative;
    width: 100%;
    height: 180px;
    color: #fff;
    background-image: url("https://loremflickr.com/400/180");
    background-size: cover;
}

.date   {
    position: absolute;
    right: 9px;
    top: 12px;
}


.card-body  {
  display: flex;
  flex-direction: column;
  min-height: 100%;  
  padding: 30px;  
}

.btn    {
    margin-top: auto;
    padding-top: 20px 0;
    width: 120px;
}
<!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-v4-grid-only@1.0.0/dist/bootstrap-grid.min.css">
    <link rel="stylesheet" href="style.css">
 </head>
 <body>
    <div class="container">
        <h2>
            Cards
        </h2>
        <ul class="row list-reset list-row">
            <li class="col-lg-6 row-item">
                <div class="card card-1">
                    <div class="card_top">
                        <div class="date">
                            <span class="date-text">
                                14.05.2023
                            </span>
                        </div>
                    </div>
                    <div class="card-body">
                        <h3 class="card-title">Card 1</h3>
                        <p class="card-text">
                            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Assumenda soluta, pariatur incidunt eius sapiente magni, autem qui distinctio non nulla libero. Id, voluptatem dolores repudiandae ea distinctio esse quaerat sit?
                        </p>
<p class="card-text">
                            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Assumenda soluta, pariatur incidunt eius sapiente magni, autem qui distinctio non nulla libero. Id, voluptatem dolores repudiandae ea distinctio esse quaerat sit?
                        </p>
                        <button class="btn">
                            Click here
                        </button>
                    </div>
                </div>
            </li>
            <li class="col-lg-6 row-item">
                <div class="card card-2">
                    <div class="card_top">
                        <div class="date">
                            <span class="date-text">
                                14.05.2023
                            </span>
                        </div>
                    </div>
                    <div class="card-body">
                        <h3 class="card-title">Card 1</h3>
                        <p class="card-text">
                            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Assumenda soluta, pariatur incidunt eius sapiente magni, autem qui distinctio non nulla libero. Id, voluptatem dolores repudiandae ea distinctio esse quaerat sit?
                        </p>
                        <button class="btn">
                            Click here
                        </button>
                    </div>
                </div>
            </li>
            <li class="col-lg-6 row-item">
                <div class="card card-3">
                    <div class="card_top">
                        <div class="date">
                            <span class="date-text">
                                14.05.2023
                            </span>
                        </div>
                    </div>
                    <div class="card-body">
                        <h3 class="card-title">Card 1</h3>
                        <p class="card-text">
                            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Assumenda soluta, pariatur incidunt eius sapiente magni, autem qui distinctio non nulla libero. Id, voluptatem dolores repudiandae ea distinctio esse quaerat sit?
                        </p>
                        <button class="btn">
                            Click here
                        </button>
                    </div>
                </div>
            </li>
            <li class="col-lg-6 row-item">
                <div class="card card-4">
                    <div class="card_top">
                        <div class="date">
                            <span class="date-text">
                                14.05.2023
                            </span>
                        </div>
                    </div>
                    <div class="card-body">
                        <h3 class="card-title">Card 1</h3>
                        <p class="card-text">
                            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Assumenda soluta, pariatur incidunt eius sapiente magni, autem qui distinctio non nulla libero. Id, voluptatem dolores repudiandae ea distinctio esse quaerat sit?
                        </p>
                        <p class="card-text">
                            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Assumenda soluta, pariatur incidunt eius sapiente magni, autem qui distinctio non nulla libero. Id, voluptatem dolores repudiandae ea distinctio esse quaerat sit?
                        </p>
                        <button class="btn">
                            Click here
                        </button>
                    </div>
                </div>
            </li>
        </ul>
    </div>
 </body>
 </html>

css flexbox bootstrap4
Источник: Stack Overflow на русском

Ответы

▲ 0

Что бы карточки были одинаковой высоты, им нужно добавить четкий размер. Например 100px, 100vw(ширина вьюпорта), 100vh(высота вьюпорта), 50% и тд. в зависимости от того, что вам нужно. И сверстайте нормально с флексами или гридами, как вам нужно.

body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}
.container {
    width: 100%;
}
.list-reset {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin: 0;
    padding: 15;
    list-style: none;
}

.col-lg-6 {
    height: 500px;
    width: 80vw;
}

.card   {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: beige;
    border-radius: 20px;
    overflow: hidden;
}

.card_top   {
    position: relative;
    width: 100%;
    height: 180px;
    color: #fff;
    background-image: url("https://loremflickr.com/400/180");
    background-size: cover;
}

.date   {
    position: absolute;
    right: 9px;
    top: 12px;
}


.card-body  {
  display: flex;
  flex-direction: column;
  min-height: 100%;  
  padding: 30px;  
}

.btn    {
    margin-top: auto;
    padding-top: 20px 0;
    width: 120px;
}
 <body>
    <div class="container">
        <h2>
            Cards
        </h2>
        <ul class="row list-reset list-row">
            <li class="col-lg-6 row-item">
                <div class="card card-1">
                    <div class="card_top">
                        <div class="date">
                            <span class="date-text">
                                14.05.2023
                            </span>
                        </div>
                    </div>
                    <div class="card-body">
                        <h3 class="card-title">Card 1</h3>
                        <p class="card-text">
                            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Assumenda soluta, pariatur incidunt eius sapiente magni, autem qui distinctio non nulla libero. Id, voluptatem dolores repudiandae ea distinctio esse quaerat sit?
                        </p>
<p class="card-text">
                            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Assumenda soluta, pariatur incidunt eius sapiente magni, autem qui distinctio non nulla libero. Id, voluptatem dolores repudiandae ea distinctio esse quaerat sit?
                        </p>
                        <button class="btn">
                            Click here
                        </button>
                    </div>
                </div>
            </li>
            <li class="col-lg-6 row-item">
                <div class="card card-2">
                    <div class="card_top">
                        <div class="date">
                            <span class="date-text">
                                14.05.2023
                            </span>
                        </div>
                    </div>
                    <div class="card-body">
                        <h3 class="card-title">Card 1</h3>
                        <p class="card-text">
                            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Assumenda soluta, pariatur incidunt eius sapiente magni, autem qui distinctio non nulla libero. Id, voluptatem dolores repudiandae ea distinctio esse quaerat sit?
                        </p>
                        <button class="btn">
                            Click here
                        </button>
                    </div>
                </div>
            </li>
            <li class="col-lg-6 row-item">
                <div class="card card-3">
                    <div class="card_top">
                        <div class="date">
                            <span class="date-text">
                                14.05.2023
                            </span>
                        </div>
                    </div>
                    <div class="card-body">
                        <h3 class="card-title">Card 1</h3>
                        <p class="card-text">
                            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Assumenda soluta, pariatur incidunt eius sapiente magni, autem qui distinctio non nulla libero. Id, voluptatem dolores repudiandae ea distinctio esse quaerat sit?
                        </p>
                        <button class="btn">
                            Click here
                        </button>
                    </div>
                </div>
            </li>
            <li class="col-lg-6 row-item">
                <div class="card card-4">
                    <div class="card_top">
                        <div class="date">
                            <span class="date-text">
                                14.05.2023
                            </span>
                        </div>
                    </div>
                    <div class="card-body">
                        <h3 class="card-title">Card 1</h3>
                        <p class="card-text">
                            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Assumenda soluta, pariatur incidunt eius sapiente magni, autem qui distinctio non nulla libero. Id, voluptatem dolores repudiandae ea distinctio esse quaerat sit?
                        </p>
                        <p class="card-text">
                            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Assumenda soluta, pariatur incidunt eius sapiente magni, autem qui distinctio non nulla libero. Id, voluptatem dolores repudiandae ea distinctio esse quaerat sit?
                        </p>
                        <button class="btn">
                            Click here
                        </button>
                    </div>
                </div>
            </li>
        </ul>
    </div>
 </body>