php - 将 div 添加到循环中的每一行

标签 php css wordpress twitter-bootstrap

我正在尝试查询要显示在 WordPress 网站主页上的帖子图像。

我希望最终结果看起来像这样 - enter image description here

我可以让跨度正确显示,但我不知道如何将 Bootstrap 的“行”类添加到每一行。

这是我目前所拥有的 -

感谢任何帮助。

谢谢!

$args = array( 'post_type' => 'video', 'posts_per_page' => 10,);

$the_query = new WP_Query( $args );

echo '<section id="our-work">';

if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post();

     $counter += 1;

     if($counter == 4 || $counter == 5 || $counter == 9 || $counter == 10) : 

     echo '<div class="span6">';
     the_post_thumbnail();;
     echo '</div>';

     else:

     echo '<div class="span4">';
     the_post_thumbnail();
     echo '</div>';

     endif;


 endwhile; endif;

echo '</section>';

最佳答案

肯定有更优雅的方法来做到这一点......但这应该有效。

$args = array( 'post_type' => 'video', 'posts_per_page' => 10,);

$the_query = new WP_Query( $args );

echo '<section id="our-work">';

if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post();
    $counter += 1;

    if ($counter == 1 || $counter == 4 || $counter == 6 || $counter == 9) {
      echo '<div class="row">';
    }

    if($counter == 4 || $counter == 5 || $counter == 9 || $counter == 10) : 

    echo '<div class="span6">';
    the_post_thumbnail();
    echo '</div>';

    else:

    echo '<div class="span4">';
    the_post_thumbnail();
    echo '</div>';

    endif;

    if ($counter == 3 || $counter == 5 || $counter == 8 || $counter == 10) {
      echo '</div>';
    }

 endwhile; endif;

echo '</section>';

关于php - 将 div 添加到循环中的每一行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19039881/

相关文章:

css - 图像上的响应式文本垂直居中

php - WordPress 搜索不起作用

php - 在 WordPress 中包含 JavaScript

php - MySQL 服务器已经消失服务器上的错误

php - 带分页的目录 View (Codeigniter)

html - 如何在不拉伸(stretch)的情况下调整图像大小?

javascript - 如何突出显示当前单击的 h3 和 li 元素 jquery

php - 不同 View 组的自定义错误页面

php - 多次接收 Paypal IPN 响应

css - 根据元素内容使用不同的CSS?