Возможно сделать выравнивание по panel-body?

Question

[Евгений]

В общем у меня в цикле создаются блоки.

Код

<div class="container">
    <div class="row">

        <?php foreach ($vac as $item) :?>
        <div class="col-md-6">
        <div class="panel panel-primary fa-border">
            <div class="panel-heading">
                <h3 class="text-center" style="font-family: 'Exo 2', sans-serif;"><?=$item['name']?></h3>
            </div>
            <div class="panel-body">
                <h4 class="panel-title">
                    <h4  class="text-center" style="font-family: 'Exo 2', sans-serif;"><i class="fa fa-id-card-o"></i> Описание</h4>
                    <br>
                    <?=$item['text']?>
                    <hr style="color: #0f0f0f; height:1px; background-color:#337ab7">
                    <h4  class="text-center" style="font-family: 'Exo 2', sans-serif;"><i class="fa fa-newspaper-o"></i> Требования</h4>
                    <?=$item['requirements']?>
                    <hr style="color: #0f0f0f; height:1px; background-color:#337ab7">
                    <h4  class="text-center" style="font-family: 'Exo 2', sans-serif;"><i class="fa fa-thumbs-o-up"></i> Условия</h4>
                    <?=$item['conditions']?>
                </h4>

            </div>
            <div class="panel-footer text-center">
                <a href="<?= \yii\helpers\Url::to(['vacancies/response', 'id' =>$item['id']])?>" type="button" data-name="<?=$item['name']?>" data-id="<?=$item['id']?>" class="btn-style-seven btnbaton" id="btnbaton">Отправить отклик</a>

            </div>
        </div>
        </div>
        <?php endforeach; ?>



    </div>

В данный момент я задал panel-body статичный размер в 600 px. Но не факт что в будущем 600px хватит. Вдруг они напишут больше текста panel-body.

Если убрать статик высоту то они становятся резиновыми. Из-за чего скачет высота. Реально ли сделать чтобы соседние блоки имели одинаковый panel-body ?

Answer 1

[tyzberd]

https://codepen.io/anon/pen/LmaBEK

Comments

[tyzberd]

если у вас 3 bootstrap тогда для row нужно добавить display: flex;

[Евгений]

tyzberd, 3 Bs. Оно сделало вот так. Т е уже не та сетка.

.contact .row{
  display: flex;
}

.contact .panel {
  display:flex;
  flex-direction:column;
  height: 100%;

}
.contact .panel-body {
  flex-grow: 1;

}

[tyzberd]

а сколько у вас в одном row дивов с классом col-md-6, должно быть только 2.
или так https://codepen.io/anon/pen/pVYZLO
но вообще не правильно что бы в row было больше 12

[Евгений]

tyzberd, Должно быть 2. А делает 4 шт. Сейчас попробую новый вариант

[tyzberd]

конечно у вас <?php foreach ($vac as $item) :?> внутри row, так не правильно

[Евгений]

tyzberd, Второй вариант помог. Спасибо

[Евгений]

Я когда в режим адаптивки вошёл и посмотрел что с ними становится при размере меньше 1000px чуть плохо не стало)

[Евгений]

tyzberd, Сделал вот так и убрало все баги.

@media screen and (min-width: 993px) {
  .contact .row {
    display: flex;
    flex-wrap: wrap;
  }

  .contact .col-md-6 {

    margin-top: 30px;
  }

  .contact .panel {
    display: flex;
    flex-direction: column;
    height: 100%;

  }

  .contact .panel-body {
    flex-grow: 1;

  }
}

Answer 2

[l4m3r]

Можно ещё с помощью JS.

Comments

[Евгений]

Сайт конечно плохо читабельный. Текст и код всё в одной каше. Попробую разобраться что там да как