我使用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>
答案 0 :(得分:1)
您可以将name
用于foreach
循环,然后检查迭代次数,如下所示:
{foreach from=$array item=var name=myloop}
{if $smarty.foreach.myloop.iteration % 4 == 1}
{* this is the first in a group of four *}
{elseif $smarty.foreach.myloop.iteration % 4 == 0}
{* this is the last in a group of four *}
{else}
{* this is the second or the third *}
{/if}
{/foreach}
阅读documentation of foreach
了解更多详情。具体来看iteration
和index
。
答案 1 :(得分:0)
由于您似乎正在使用 Smarty v3 ,因此您可以直接在变量上使用@iteration
:
{foreach $array as $var}
{if $var@iteration %4 == 1}
<div class="row">
{/if}
<div class="span3"><!-- ... --></div>
{if $var@iteration %4 == 0}
</div><!-- /div.row -->
{/if}
{/foreach}
另一方面,.thumbnails
旨在用作.row
,但它允许的不仅仅是经典的12个单元格。
所以我不知道它是否能很好地处理.row-fluid
。这就是为什么你的解决方法需要几个 hard -rows。
最好的做法是自己定义跨度的宽度,或等待像这样的.thumbnails-fluid
实现:Demo (jsfiddle)
.thumbnails.thumbnails-fluid { margin-left: 0; }
.thumbnails.thumbnails-fluid > [class*="span"] {
display: block;
float: left;
width: 100%;
min-height: 1px;
margin-left: 2.127659574468085%;
*margin-left: 2.074468085106383%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.thumbnails.thumbnails-fluid .span12 { width: 100%; *width: 99.94680851063829%; }
.thumbnails.thumbnails-fluid .span11 { width: 91.48936170212765%; *width: 91.43617021276594%; }
.thumbnails.thumbnails-fluid .span10 { width: 82.97872340425532%; *width: 82.92553191489361%; }
.thumbnails.thumbnails-fluid .span9 { width: 74.46808510638297%; *width: 74.41489361702126%; }
.thumbnails.thumbnails-fluid .span8 { width: 65.95744680851064%; *width: 65.90425531914893%; }
.thumbnails.thumbnails-fluid .span7 { width: 57.44680851063829%; *width: 57.39361702127659%; }
.thumbnails.thumbnails-fluid .span6 { width: 48.93617021276595%; *width: 48.88297872340425%; }
.thumbnails.thumbnails-fluid .span5 { width: 40.42553191489362%; *width: 40.37234042553192%; }
.thumbnails.thumbnails-fluid .span4 { width: 31.914893617021278%; *width: 31.861702127659576%; }
.thumbnails.thumbnails-fluid .span3 { width: 23.404255319148934%; *width: 23.351063829787233%; }
.thumbnails.thumbnails-fluid .span2 { width: 14.893617021276595%; *width: 14.840425531914894%; }
.thumbnails.thumbnails-fluid .span1 { width: 6.382978723404255%; *width: 6.329787234042553%; }