0

通常のテンプレートをレスポンシブ テンプレートに変換しています。列の生成に問題があります。

正しく動作しないマイ コード

<div class="row-fluid">
    {foreach name=aussen item=module_data from=$module_content}
    {php} $col++; {/php}
        <div class="span4">
            <h2>Heading</h2>
            <p>Text</p>
            <p><a class="btn" href="#">View details »</a></p>
        </div>
    {php} if ($col>=4) {$col=0;echo '';}{/php}
    {/foreach}
</div>

レスポンシブ テーマの構造は次のとおりです。

<div class="span9">
    <div class="row-fluid">
        <div class="span4">
          <h2>Heading</h2>
          <p>Text</p>
          <p><a class="btn" href="#">Button &raquo;</a></p>
        </div>
        <div class="span4">
          <h2>Heading</h2>
          <p>Text</p>
          <p><a class="btn" href="#">Button &raquo;</a></p>
        </div>
        <div class="span4">
          <h2>Heading</h2>
          <p>Text</p>
          <p><a class="btn" href="#">Button &raquo;</a></p>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span4">
          <h2>Heading</h2>
          <p>Text</p>
          <p><a class="btn" href="#">Button &raquo;</a></p>
        </div>
        <div class="span4">
          <h2>Heading</h2>
          <p>Text</p>
          <p><a class="btn" href="#">Button &raquo;</a></p>
        </div>
        <div class="span4">
          <h2>Heading</h2>
          <p>Text</p>
          <p><a class="btn" href="#">Button &raquo;</a></p>
        </div>
    </div>
</div>

各行が 3、4、または 5 の列を与える最大値に達した場合、毎回 "row-fluid" クラスの行を生成するようにコードを書き直すにはどうすればよいですか?

4

1 に答える 1

2

Smarty 3 のマニュアル(またはSmarty 2 の同等のページ) で説明されているように、 プロパティとプロパティ{foreach}を使用してループのどの反復にいるかを調べることができます。iterationindex

この場合、「4 回の繰り返しごとに」何か違うことをしたいので、Smarty のis even by 4構造を使用できます。foreach ループの名前はaussenであるため、テストする変数は です$smarty.foreach.aussen.iteration。

または、既存の{$col}変数を使用することもできます (ただし、タグを使用しないという上記のコメントを参照してください{php})。列番号がゼロの場合は、コンテナー div を開いて新しい行を開始します。4 の場合は、コンテナ div を閉じて行の終わりをマークします。このアプローチでは、4 で割り切れない場合に備えて、ループの最後の行にいるかどうかを確認する必要もあるため、常に行を閉じます: {if $col==4 or $smarty.foreach.aussen.last}</div>{/if}.

于 2013-07-20T13:06:19.527 に答える