yii2, bootstrap, элементы прыгают в блоке row

Question

Я пытаюсь вывести продукты

Я использую yii2, в нем уже подключен bootstrap

 <div class="section section-margin">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="title-products"><span class="title-products-span">Продукты</span></div>
                </div>
            </div>
            <!-- Shop Wrapper Start -->

            <div class="row">
                <div class="shop_wrapper grid_4">
                    <!-- Single Product Start -->
                    <?php foreach ($products as $data): ?>
                        <div class="col-xl-2 col-lg-3 col-md-3  product">
                            <div class="product-inner">
                                <div class="thumb">
                                    <a href="/site/product?id=<?php echo $data['id'] ?>" class="image">
                                        <img class="first-image" src="<?php echo $data['image_path'] ?>"
                                             alt="Product"/>
                                    </a>
                                </div>
                                <div class="content">
                                    <h5 class="title"><a
                                                href="/site/product?id=<?php echo $data['id'] ?>"><?php echo $data['name'] ?></a>
                                    </h5>
                                    <span class="price">
                                            <span class="new"><?php echo $data['price'] ?> грн.</span>
                                    </span>
                                    <div class="shop-list-btn">
                                        <a class="btn btn-sm btn-outline-dark btn-hover-primary show-product"
                                           href="/site/product?id=<?php echo $data['id'] ?>"> Посмотреть продукт</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                    <!-- Single Product End -->
                </div>
            </div>
            <!-- Shop Wrapper End -->
        </div>
    </div>
    <!-- Shop Section End -->

Но у меня блоки прыгают(как показано на картинке)

как это исправить?

Answer 1

Вероятно, у вас картинка к товару Region (в правом верхнем углу скриншота) на 1-2 пикселя меньше всех остальных.

Вам нужно жёстко задать высоту карточек товаров:

.product-inner {
    height: 200px; // Подобрать по максимальной высоте своих карточек товаров.
}

либо фотографий:

.first-image {
    height: 100px; // 
}

Пписать min-height не совсем корректно, т.к. может появиться карточка с названием в 2 строки и тогда она снова сломает сетку. В любом случае, тогда вам надо будет снова увеличить высоту, но при заданном height на это время у вас хотя бы не поедет снова вёрстка.

БЛОГ НА HUSL

yii2, bootstrap, элементы прыгают в блоке row

Ответы (1 шт):