Почему интепритатор пропускает блоки на сайте?

Question

[Kristina8787]

Здравствуйте, для учебного проекта скачала шаблон сайта, написала метод вывода в блоки информации из БД, но на деле получаю вот такое безобразие

вот сам код из шаблона

<div class="products-grid">
            <header>
                <h3 class="head text-center">Последние Поступления</h3>
            </header>
            <?php foreach ($productsList as $product): ?>
            <div class="col-md-4 product simpleCart_shelfItem text-center">
                <a href="/views/templateShop/single.html"><img src="/views/templateShop/images/p<?php echo $product['id']; ?>.jpg" alt="" /></a>
                <div class="mask">
                    <a href="/views/templateShop/single.html">Быстрый Просмотр</a>
                </div>
                <a class="product_name" href="/views/templateShop/single.html"><?php echo $product['name']; ?></a>
                <p><a class="item_add" href="#"><i></i> <span class="item_price">$<?php echo $product['price']; ?></span></a></p>
            </div>
            <?php endforeach; ?>
<div class="clearfix"></div>
        </div>

Посмотрела в стилях , там нет вроде как никаких таких заморочек которые могли бы привести к такому, наверняка ктото сталкивался с таким, заранее спасибо за ответ

Answer 1

[Антон Литвиненко]

Может быть из-за float: left у блоков. Блок зацепился за более длинный блок, у которого длинное название.
В третьем бутстрапе надо было каждый ряд заворачивать в row, чтобы такого не было

Comments

[Kristina8787]

float: left стоит, как такое исправлять чтобы не поломать?

[Антон Литвиненко]

Kristina8787, каждые три блока нужно заворачивать в контейнер с классом row. Для этого нужно поставить счётчик и каждые три итерации хитро расставлять открывающий и закрывающие теги.
Или перевести на 4й бутстрап и не мучаться

[Kristina8787]

Антон Литвиненко, с бутстрапом очень слабо знакома, но я так понимаю,что нужно скачать архив новой версии, и в css и js папках заменить файлы бутстрапа на новые, при этом весь текст из старого bootstrap.css надо переместить в новый?

[Антон Литвиненко]

Kristina8787, я бы на вашем месте поупражнялся бы со счетчиком и проверками, вы же бекенд учите

[Kristina8787]

Антон Литвиненко, да я бы с радостью, но как это делается не знаю, до таких знаний еще не добралась, как упаковать каждые три прохода цикла в отдельный контейнер, и хитро расставить теги, может есть пример какой?

[Антон Литвиненко]

Kristina8787, как-то так

[Kristina8787]

Антон Литвиненко, вроде сделала, но у меня странная ситуация

и в целом я правильно сделала? и почему без echo не работает не понимаю, и выдает каждый круг что $i = 1

[Антон Литвиненко]

Kristina8787, инициализация счётчика вне цикла должна быть, а инкремент в цикле

И зачем вам эхо счётчика, только для отладки разве что

[Kristina8787]

Антон Литвиненко, поставила,инициализацию $i перед циклом, и все сломалось, теперь выводит вот так по строкам
12
345
678
9

[Антон Литвиненко]

Kristina8787, что выводит, куда выводит, кто все эти цифры?
https://ideone.com/GZabUM

[Kristina8787]

Антон Литвиненко, я вынесла инициализацию $i перед циклом, решила посмотреть как будет работать цикл,сделала echo $i внутри цикла , каждая цифра символизирует один блок который внутри блока row, и вот как цифры написаны, так и выводятся блоки, т.е. на первой строке два блока,на второй и третьей по три блока как положено,на четвертой один блок

[Антон Литвиненко]

Kristina8787, попробуйте инициализировать нулём. Хотя я прежде чем писать проверил как работает

[Антон Литвиненко]

Kristina8787, вы же инкремент в конце делаете, а не так как на вашем скриншоте?

[Kristina8787]

Антон Литвиненко, спасибо, нулем вне цикла сработало) а почему когда внутри цикла был и был echo то тоже срабатывало?

[Антон Литвиненко]

Kristina8787, смотрите выше. Инкремент в моем примере я делал после вывода разметки

[Kristina8787]

Антон Литвиненко, да да я уже поняла что мой косяк) у меня получается сначала инкремент срабатывал ,а потом только условие, а надо было после условия ставить,спасибо что заметили мою ошибку)

Answer 2

[zorca]

Просто задайте минимальную высоту блоку

Comments

[Kristina8787]

минималка стоит