php - 带有 Twitter Bootstrap 布局的动态列插入

Question

我试图在基于 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 bootstrap 网格系统(我认为是)基于每行 12 列。我想避免这种情况:

+------------------------ row ------------------------+

[--col-*-3--] [--col-*-3--] [--col-*-3--] [--col-*-3--] 
[--col-*-3--] ...

+------------------------ row ------------------------+

[--col-*-3--] [--col-*-3--] [--col-*-3--] [--col-*-3--] 

因此，有些人可能会说“将数组分块或使用标志来跟踪行是否已填满”。但是我想在html文件中避免这些操作。我的问题是，如何在不破坏响应式布局的情况下处理这种保持四列结构的设计？提前谢谢你

Answer 1

我认为这不会破坏您的布局。您的解决方案应该有效，我已经尝试过类似的方法。也许是 .col-lg 破坏了您针对较小屏幕的解决方案？这里是example使用 .col-xs。您是否尝试为每种屏幕分辨率指定列的宽度？

 ...
<div class="col-lg-3 col-md-3 col-xs-3"> 
 ...
</div>
 ...