У меня проблема в том, что кнопки, показанные на картинке ниже, не выровнены. Я пробовал решение, описанное в разных вопросах StackOverlow Первое решение; Второе решение; Третье решение. Ни один из них у меня не работает. Нет никакого дополнительного кода CSS, влияющего на карты или элементы.
<link href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel = "stylesheet"/>
<style>
.cont2 {
overflow:hidden;
}
.cont2:hover .image2 {
-webkit-transform:scale(1.2);
transform:scale(1.2);
}
.image2 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
-webkit-transform:scale(1);
transform:scale(1);
}
</style>
<div class = "container-fluid">
<div class = "row">
<div class = "col-lg-3 col-md-3 col-sm-6 ">
<div class = "card card h-100" style = "width: 100%; border-width: 2px; border-color: darkgray; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);border-radius: 0">
<div class = "h-100 cont2">
<div class = "cont2 card-img-top">
<img class = "image2 card-img-top" src = "http://via.placeholder.com/1365x768">
</div>
<div class = "card-body d-flex flex-column">
<h5 class = "card-title">Second</h5>
<p class = "card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, quod, deserunt. Libero suscipit ipsam rerum!</p>
<a href = "more.html" class = "btn btn-primary mt-auto btn-block homecardbutton " style = "background-color:#8e44ad; border-width:0px">Read More</a>
</div>
</div>
</div>
</div>
<div class = "col-lg-3 col-md-3 col-sm-6">
<div class = "card card h-100" style = "width: 100%; border-width: 2px; border-color: darkgray; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
<div class = "h-100 cont2">
<div class = "cont2 card-img-top">
<img class = "image2 card-img-top" src = "http://via.placeholder.com/1365x768">
</div>
<div class = "card-body d-flex flex-column">
<h5 class = "card-title">First card</h5>
<p class = "card-text">Lorem ipsum dolor adipisicing elit. Natus est iusto aperiam nesciunt, fugit asperiores a recusandae, cum officiis optio repellat quos. Doloremque deleniti ducimus id reiciendis explicabo vel eum.</p>
<a href = "moremore.html" class = "btn btn-primary mt-auto btn-block" style = "background-color:#8e44ad; border-width:0px">Read More</a>
</div>
</div>
</div>
</div>
</div>
</div>PS: извините за мой плохой английский
Вы также можете использовать card-footer с несколькими служебными классами, чтобы удалить его стиль по умолчанию: bootply.com/eKJcyjWkUo
Код нужно очистить и потратить несколько минут, чтобы понять, как работают другие ответы. Ответ дублирования, примененный к вашему коду, работает должным образом: codeply.com/go/jp9FPuWGam






Я тоже пробовал это решение. Но не вышло.