Динамическая вставка столбца с макетом начальной загрузки Twitter
Я пытаюсь показать элементы в адаптивной структуре, основанной на 4 столбцах, как это:
+------------------------ row ------------------------+
[--col-*-3--] [--col-*-3--] [--col-*-3--] [--col-*-3--]
+------------------------ row ------------------------+
[--col-*-3--] [--col-*-3--] [--col-*-3--] [--col-*-3--]
Итак, я перехожу к пунктам:
<div class="row">
<?php foreach ($items as $i): ?>
<div class="col-lg-3">
<?php echo $i->getName(); ?>
</div>
<?php endforeach; ?>
</div>
Приведенный выше код будет работать для 4 элементов или менее, потому что система сетки начальной загрузки Twitter (я так думаю) основана на 12 столбцах в строке. Я хочу избежать этого:
+------------------------ row ------------------------+
[--col-*-3--] [--col-*-3--] [--col-*-3--] [--col-*-3--]
[--col-*-3--] ...
+------------------------ row ------------------------+
[--col-*-3--] [--col-*-3--] [--col-*-3--] [--col-*-3--]
Так что некоторые люди могут сказать:разбить массив на части или использовать флаг для отслеживания заполнения строки«. Но я хочу избежать этих операций в html-файле. У меня вопрос, как я могу справиться с сохранением этого дизайна four columns структура без ломаного адаптивного макета? заранее спасибо
Решение
Я не думаю, что это сломает ваш макет.
Ваше решение должно работать, я попробовал нечто подобное.
Может быть, именно .col-lg ломает ваше решение для меньшего экрана?
Здесь пример с .col-xs.
Вы пытаетесь указать ширину col для каждого разрешения экрана?
...
<div class="col-lg-3 col-md-3 col-xs-3">
...
</div>
...
Другие решения
Других решений пока нет …