使用 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 文件中避免这些操作。我的问题是，如何在不破坏响应式布局的情况下处理这种保持 four columns 结构的设计？提前谢谢你

Answer 1

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

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

使用 Twitter bootstrap 布局动态插入列

Dynamic column insertion with twitter bootstrap layout

css

php

responsive-design

twitter-bootstrap