0

私はsmartyとbootstrapを使っていますが、

私は画像ギャラリーを構築しているので、マークアップは以下のようになります。

としてカテゴリをループできることはわかって{foreach $categories as $category}{/foreach} いますが、以下に投稿されたマークアップからわかるように、4 つのグループでラップする必要があります。やり方がわからない部分です。

また、常に 4 の倍数であるとは限らないことに注意してください。たとえば、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>
4

2 に答える 2

1

nameforループを使用して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}

詳細については、 のドキュメントをforeach参照してください。具体的には と を見てiterationくださいindex。

于 2012-09-14T12:28:02.037 に答える
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}

スマーティードキュメント

もう 1 つは、 は.thumbnailsとして使用することを意図して.rowいますが、従来の 12 セルよりも多くのセルを使用できます。

.row-fluidそのため、うまく処理できるかどうかはわかりません。そのため、回避策にはいくつかのハード行が必要です。

.thumbnails-fluid最善の方法は、スパンの幅を自分で定義するか、次のような実装を待つことです:デモ (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%; }
于 2012-09-14T17:27:52.053 に答える