Делаем карточки Dynami c Md Bootstrap одинаковой высоты - PullRequest
Новая
       35

Делаем карточки Dynami c Md Bootstrap одинаковой высоты

0 голосов
/ 09 июля 2020

Я пытаюсь сделать эти карточки одинаковой высоты независимо от того, как долго будет заголовок mov ie. Карты создаются динамически, и я также использую swiper js в качестве карусели. Это карты md Bootstrap для пояснения. Вот мой код. 

 <div class="swiper-container">
     <div class="swiper-wrapper trending_movies">
         <!-- dynamic cards go here -->
         <div class="swiper-slide">
            <div class="card">
                <div class="icon-button">
                    <ion-icon name="ellipsis-horizontal-circle-sharp" class="ion-icon" 
                    data-movie="${el.title}"></ion-icon>
                </div>
                <a href="${`/client/views/movies.html?movieId=${el.id}&movie=${el.title}`}" data-src="${el.id}" >
                     <img class="img-size" src="${poster_image}" alt="${el.title}">
                </a>
                <div class="card-body">
                    <h6 class="card-title"> ${el.title}</h6>
                    <p>${el.release_date}</p>
                </div>
            </div>
         </div>
     </div>
 </div>

Вот карты внутри контейнера swiper js

1 Ответ

0 голосов
/ 09 июля 2020

Вы можете использовать это свойство в своем CSS файле, например, в противном случае добавили маржу вашему тегу p для управления этой проблемой. 

  .card-body{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  }
...