Выравнивание кнопок внутри карт для Bootstrap 4.0

У меня проблема в том, что кнопки, показанные на картинке ниже, не выровнены. Я пробовал решение, описанное в разных вопросах StackOverlow Первое решение; Второе решение; Третье решение. Ни один из них у меня не работает. Нет никакого дополнительного кода CSS, влияющего на карты или элементы.

Выравнивание кнопок внутри карт для Bootstrap 4.0

<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: извините за мой плохой английский

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

Mr_Grennn7 31.05.2018 17:53

Вы также можете использовать card-footer с несколькими служебными классами, чтобы удалить его стиль по умолчанию: bootply.com/eKJcyjWkUo

Robert 31.05.2018 18:13

Код нужно очистить и потратить несколько минут, чтобы понять, как работают другие ответы. Ответ дублирования, примененный к вашему коду, работает должным образом: codeply.com/go/jp9FPuWGam

Zim 31.05.2018 19:06
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
3
117
0

Другие вопросы по теме