почему позиционирование сетки Bootstrap оставляет пустые столбцы? - PullRequest
Новая
       20

почему позиционирование сетки Bootstrap оставляет пустые столбцы?

1 голос
/ 15 апреля 2019

Я пытаюсь создать сетку позиционирования Bootstrap, сгенерированную циклом PHP.Сетка будет содержать 11 imgs, и цикл повторяется 11 раз.Когда создается сетка, я не понимаю, почему 2 столбца всегда пропускаются

Это код, который я использую, я загрузил картинку с результатом введите описание изображения здесь , сгенерированныймой код 

<style>

</style>
<?php 
$counter = 11;

echo '<div class="row " >';
for ($i = 1; $i < $counter; $i++) {

    echo "<div class=col-md-4 >  ciao <img src=pictures/venue$i.jpg alt=Flowers class=img-fluid>  </div>";

    if (($i+1) % 4 == 0)
        echo '</div><div class="row" id=my-row>';
}
echo '</div>';
?>

Ответы [ 2 ]

0 голосов
/ 15 апреля 2019 
<?php

$counter = 11;
echo '<div class="row">';
for ($i = 0; $i <= $counter; $i++) {
    $x = $i + 1; // for venue images starting at 1
    echo '<div class="col-md-4">  ciao <img src="pictures/venue' . $x . '.jpg" alt="Flowers" class="img-fluid"> </div>';
    if ( ( $x ) % 3 == 0 && $i != $counter) //added  $i != $counter to make sure on the last iteration an extra row isn't added and changed modulus to 3 not 4
        echo '</div><div class="row" id="my-row-' . $x . '">';
}
echo '</div>';

Bootstrap работает от 12 столбцов. У вас есть несколько проблем с вашим кодом:

  1. Вы начинаете свой счетчик с 1, в результате чего в первом блоке отображается 3, а в следующем блоке отображается 4 и т. Д. Col-md-4 занимает 4 из 12 столбцов, поэтому в одном из них можно разместить только 3 из них. строка.

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

  3. Чтобы правильно отобразить то, что вы хотите (сетка из 3 изображений, 4 строки), вам нужно 12 изображений, или вы всегда будете отсутствовать 1.

  4. Каждый элемент, которому предоставлен идентификатор, должен быть уникальным идентификатором, который вы повторяете my-row

0 голосов
/ 15 апреля 2019

Изменить эту строку: 

if (($i+1) % 4 == 0)

К этому: 

if (($i) % 3 == 0)

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

...