Мне нужно, чтобы дети div были равны друг другу, как долго материально вместе со столбцом. У меня только одна строка, остальные останутся столбцами из бутстрапа.
Это скрипка, которую я создал
Я уже делаю это равным, но моя проблема заключается в том, что скрипт получает самый высокий div и применяет его к другим столбцам, что делает другие столбцы большими пробелами, когда у него нет такого длинного контента. Мне нужно получить его за строку, хотя я не объявляю более одной строки.
Кнопка также нужна в нижней части столбца
Похоже, это
<div class="container">
<div class="row">
<div class="item-container col-lg-4 col-md-4 col-sm-4">
<div class="image"><img class="img-responsive"
src="http://placehold.it/350x150"></div>
<div class="item-title">
title title title title title title title
title title title title title title title title title
</div>
<div class="item-details">
<p>details 1</p>
<p>details 2</p>
<p>details 3</p>
<p>details 4</p>
</div>
<div class="item-button">
<button type="button" class="btn btn-primary">Add to cart</button>
</div>
</div>
<div class="item-container col-lg-4 col-md-4 col-sm-4">
<div class="image"><img class="img-responsive"
src="http://placehold.it/350x150"></div>
<div class="item-title">
title title title title title title title
title title title title title title title title title
title title title title title title title
title title title title title title title title title
</div>
<div class="item-details">
<p>details 1</p>
<p>details 2</p>
<p>details 3</p>
<p>details 4</p>
<p>details 1</p>
<p>details 2</p>
<p>details 3</p>
<p>details 4</p>
</div>
<div class="item-button">
<button type="button" class="btn btn-primary">Add to cart</button>
</div>
</div>
</div>
</div>
Моя рекомендация будет заключаться в использовании плагина высоты матча
Я вложил его в эту вилку вашего jsfiddle
Вы можете увидеть, что это упростит. Конечно, вместо вставки всего js файла вы бы включили js файл из https://github.com/liabru/jquery-match-height
то просто используйте
$(document).ready(function() {
$('.item-container').matchHeight();
});