Есть сетка bootstrap 4
с 4 колонками. Как сделать так, чтобы контент внутри (покрашен с желтый цвет) при любом количестве содержимого был одинаковой высоты?
Для самих колонок есть отличное решение:
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
}
Но, есть 2 проблемки:
1 - внутри содержится ссылка, которая не flex
;
2 - нужна обводка вокруг контента, НО без обводки самой картинки. Вот здесь у меня затык и я не знаю как решить.
Код:
.row {
margin-top: 20px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.row>[class*='col-'] {
display: flex;
flex-direction: column;
border: 1px solid green;
padding: 10px;
}
.task-box {
background-color: yellow;
}
.task-box-inner {
border: 2px solid blue;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row no-gutters">
<div class="col-3 mb-5">
<a class="task-box" href="javascript:void(0);">
<img class="img-fluid" src="http://via.placeholder.com/350x150">
<div class="task-box-inner">
<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
<div class="hour">posted 15 hours ago</div>
</div>
</a>
</div>
<div class="col-3 mb-5">
<a class="task-box" href="javascript:void(0);">
<img class="img-fluid" src="http://via.placeholder.com/350x150">
<div class="task-box-inner">
<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
<div class="hour">posted 15 hours ago</div>
</div>
</a>
</div>
<div class="col-3 mb-5">
<a class="task-box" href="javascript:void(0);">
<img class="img-fluid" src="http://via.placeholder.com/350x150">
<div class="task-box-inner">
<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h4>
<div class="hour">posted 15 hours ago</div>
</div>
</a>
</div>
<div class="col-3 mb-5">
<a class="task-box" href="javascript:void(0);">
<img class="img-fluid" src="http://via.placeholder.com/350x150">
<div class="task-box-inner">
<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</h4>
<div class="hour">posted 15 hours ago</div>
</div>
</a>
</div>
</div>