如何使用 foreach 填充 bootstrap 网格？

Question

因为我正在尝试使用 foreach 两列制作 bootstrap 网格结构，并且在其内部是一行和两行结构。附上屏幕截图以便更好地查看。

注意：CSS 没有问题，但前三项在网格中如图所示。

计数器没有使用 col-md-4 并且不确定在哪里使用计数器增量 counter++？如果我想使用 foreach 显示前三项怎么办？

还有其他解决此布局的方法吗？到目前为止已尝试

  <?php $counter = 0;
            foreach($view->result as $result) {

      <div id="hot-post" class="row hot-post">      
            <?php if( $counter == 0 || $counter % 3 == 0 ) {    ?> 
            <div class="col-md-8 hot-post-left">
                <div class="post post-thumb">
                    // first element common body 

                </div>
            </div>

       <?php if( $counter == 1 || $counter == 2 ) { ?> 
          <div class="col-md-4 hot-post-right">
           <?php if( $counter == 1){ ?>
                <div class="post post-thumb">
                    // second element common body 
                 </div>

          </php if ( $counter == 2){
                <div class="post post-thumb">
                    // third element common body 
                 </div>
          </div>
         <?php counter++; } } ?>
       </div> //closing row 
      <?php } ?>  //closing foreach

Answer 1

您的代码中存在一些语法错误，例如：

左右大括号不同步，即 foreach 循环和 if 块未正确关闭
counter++; 应该是 $counter++;

此外，逻辑错误也很少。按以下方式更改您的代码，

<?php 
    $counter = 0;
    foreach($view->result as $result) { 
    ?>
        <div id="hot-post" class="row hot-post">      
        <?php if( $counter == 0 || $counter % 3 == 0 ) { ?> 
            <div class="col-md-8 hot-post-left">
                <div class="post post-thumb">
                    // first element common body 
                </div>
            </div>
        <?php } ?>
        <?php if( $counter != 0 && $counter % 3 != 0 ) { ?> 
            <div class="col-md-4 hot-post-right">
            <?php if( $counter % 3 == 1){ ?>
                <div class="post post-thumb">
                    // second element common body 
                </div>
            <?php } ?>
            <?php if ( $counter % 3 == 2){ ?>
                <div class="post post-thumb">
                    // third element common body 
                </div>
            </div>
            <?php } ?>
        </div>
    <?php
        }
        ++$counter;
    } 
?>

如何使用 foreach 填充 bootstrap 网格？

How Can I fillup bootstrap grid using foreach?

php

for-loop

foreach

twitter-bootstrap-2

col