Лучший способ в начальной загрузке отображать столбцы вместо использования php для создания строк после каждых 3

-2

Извините за заголовок вопроса. Я действительно не знал, как лучше всего описать это в коротком предложении.

В принципе, я хочу прокрутить каждое из своих изображений и отобразить их. Однако, делая это, я сделал следующее:

<div class="row">
    <div class="col-sm-4">
        <img .../>
    </div>
    <div class="col-sm-4">
        <img .../>
    </div>
    <div class="col-sm-4">
        <img .../>
    </div>
</div>
<div class="row">
    <div class="col-sm-4">
        <img .../>
    </div>
    <div class="col-sm-4">
        <img .../>
    </div>
    <div class="col-sm-4">
        <img .../>
    </div>
</div>

Потому что для моего дизайна может быть только 3 столбца подряд, это отлично работает. Однако теперь, если я хочу сделать это в php, мне нужно проверить кол-во цикла. Если его кратное показание 3

<div class="row">

и если его кратное 3 + 1, то показать

</div>

для закрытия строки.

Есть ли способ, которым я могу сделать разметку, выглядеть так же, как в примере выше, но используя этот html ниже:

    <div class="row">
    <div class="col-sm-4">
        <img .../>
    </div>
    <div class="col-sm-4">
        <img .../>
    </div>
    <div class="col-sm-4">
        <img .../>
    </div>
    <div class="col-sm-4">
        <img .../>
    </div>
    <div class="col-sm-4">
        <img .../>
    </div>
    <div class="col-sm-4">
        <img .../>
    </div>
</div>

Его просто заставляя мою оценку выглядеть очень грязно. Есть ли лучший способ в bootstrap сделать это без использования php?

благодаря

  • 0
    почему отрицательное голосование?
  • 0
    Ваш «вопрос» не имеет смысла. Почему вы вообще используете PHP, если целью является его удаление? Кроме того, вы не добавили никакой логики PHP в свой вопрос, так как кто-то должен помочь вам посоветовать?
Показать ещё 4 комментария
Теги:

1 ответ

0

Вы хотите включить условия в свой цикл PHP, чтобы PHP знал, когда добавить в row.

Ниже я изложил непроверенный набор PHP-кода, который, надеюсь, объяснит, где вы ошибетесь.

<?php

$images         = array(...);
$images_per_row = 3;

// Here is where we determine how the images
// should be divided into the rows.
$total_images   = count($images);
$total_rows     = ceil($total_images / $images_per_row);

// Loop through each 'row'
for ($row=0; $row<$total_rows; $row++)
{
  // Open the 'row'
  echo '<div class="row">';

  // We have an 'offset' to avoid displaying the same image
  // multiple times in the loop.
  $offset = $row * $images_per_row;

  // Loop through each 'col-sm-4' and 'img'
  for ($i=0; $i<$images_per_row; $i++)
  {
    echo '<div class="col-sm-4">';
    echo   "<img src='{$images[$offset + $i]}' />";
    echo '</div>';
  }

  // Closing the 'row'
  echo '</div>';
}

Существует множество способов сделать это. Вы даже можете сделать все это в рамках одного цикла, если вы используете правильные условия в цикле.

Дело в том, что вам нужен способ рассказать PHP "Эй, нам нужно разделить все это на треть, иначе мы никогда не сможем это сделать".

Сторожевая заметка, PHP + HTML - очень уродливый брак. Пожалуйста, избегайте его любой ценой (если у вас всего 10 минут, и вы пытаетесь помочь кому-то в переполнении стека).

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню