我正在使用 smarty 和 bootstrap,
我正在建立一个图片库,所以我的标记最终如下所示。
我知道我可以循环遍历我的类别,{foreach $categories as $category}{/foreach}
但是正如您从下面发布的标记中看到的那样,我需要将四个分组包装起来。那是我不知道该怎么做的部分。
另外,请注意,可能并不总是四的倍数,例如可能有 15 个类别。
我该怎么做?
<div class="row-fluid">
<ul class="thumbnails">
<li class="span3">
<div class="thumbnail">
<a href="#" class="thumbnail"><img src="http://placehold.it/260x180" alt=""></a>
<div class="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida
at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
</div>
</div>
</li>
<li class="span3">
<div class="thumbnail">
<a href="#" class="thumbnail"><img src="http://placehold.it/260x180" alt=""></a>
<div class="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida
at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
</div>
</div>
</li>
<li class="span3">
<div class="thumbnail">
<a href="#" class="thumbnail"><img src="http://placehold.it/260x180" alt=""></a>
<div class="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida
at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
</div>
</div>
</li>
<li class="span3">
<div class="thumbnail">
<a href="#" class="thumbnail"><img src="http://placehold.it/260x180" alt=""></a>
<div class="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida
at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
</div>
</div>
</li>
</ul>
</div>
<div class="row-fluid">
<ul class="thumbnails">
<li class="span3">
<div class="thumbnail">
<a href="#" class="thumbnail"><img src="http://placehold.it/260x180" alt=""></a>
<div class="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida
at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
</div>
</div>
</li>
<li class="span3">
<div class="thumbnail">
<a href="#" class="thumbnail"><img src="http://placehold.it/260x180" alt=""></a>
<div class="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida
at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
</div>
</div>
</li>
<li class="span3">
<div class="thumbnail">
<a href="#" class="thumbnail"><img src="http://placehold.it/260x180" alt=""></a>
<div class="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida
at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
</div>
</div>
</li>
<li class="span3">
<div class="thumbnail">
<a href="#" class="thumbnail"><img src="http://placehold.it/260x180" alt=""></a>
<div class="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida
at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
</div>
</div>
</li>
</ul>
</div>