Question

如果我想在彼此旁边显示网格，我该如何制作脚手架。我的实际代码

<div class="span8">
<div class="row-fluid">
<?php foreach($items as $item) : ?>
   <div class="span6">
      <?= $item ?>
   </div>
<?php endforeach; ?>
</div>
</div>

网格显示为

-------------------
1box       2box
-------------------
3box
-------------------
4box
-------------------
5box
-------------------

我想展示

-------------------
1box       2box
-------------------
3box       4box
-------------------
5box
-------------------

Answer 1

   <div class="span8 mutli-column">
       <?php   
         $c = 0;
         foreach( $items as $item ):

            //Needs Break Boolean, true if counter at second column
            $b = (( ++$c % 2 == 0 ) ? true : false );

            if ( $b ) 
                echo '<div class="row-fluid">'; ?>

               <div class="span6">
                    <?php echo $item; ?>
               </div>

           <?php
            if ( $b ) 
                echo '</div>';

       endforeach; ?>
  </div>

使用％Modulus，您可以计算每一次迭代，从而进入一个新的.row-fluid行，让自己进入如下所示的HTML结构：

<div class="span8 mutli-column">
    <div class="row-fluid">
        <div class="span6">1</div>
        <div class="span6">2</div>
    </div>
    <div class="row-fluid">
        <div class="span6">3</div>
        <div class="span6">4</div>
    </div>
    <div class="row-fluid">
        <div class="span6">5</div>
        <div class="span6">6</div>
    </div>
    <div class="row-fluid">
        <div class="span6">7</div>
        <div class="span6">8</div>
    </div>
</div>

这是用上面构造的 Fiddle ：

Answer 2

也许这不是最佳解决方案，但可以帮助您解决问题。注意我没有测试这段代码。所以，看看这个想法。

<div class="span12">
<?php
$i = 0;
foreach($items as $item) :
    if ($i == 0) echo '<div class="row-fluid">';
?>
    <div class="span6">
    <?= $item ?>
    <?php
    if ($i == 1) echo '</div>';
    $i = 1 - $i;
    ?>
<?php endforeach; ?>
<?php if ($i == 0) echo '</div>'; ?>
</div>

Answer 3

Bootstrap 2：

<div class="row-fluid">

<?php foreach ($items as $i => $item) : ?>
  <?php if ($i && $i % 2 == 0) : ?>
    </div><!-- /.row-fluid -->
    <div class="row-fluid">
  <?php endif; ?>

  <div class="span6">
    <?php echo $item; ?>
  </div>

<?php endforeach; ?>

</div><!-- /.row-fluid -->

Bootstrap 3：

<div class="row">

<?php foreach ($items as $i => $item) : ?>
  <?php if ($i && $i % 2 == 0) : ?>
    </div><!-- /.row -->
    <div class="row">
  <?php endif; ?>

  <div class="col-sm-6">
    <?php echo $item; ?>
  </div>
<?php endforeach; ?>

</div><!-- /.row -->

Answer 4

使用此代码：

.row-fluid [class*="span"]:nth-child(3n+1) {
   margin-left: 0;
}

Answer 5

更新：我自己非常简单但有效的帖子循环解决方案在两列中（例如，在bootstrap中） - 来自特定类别ID的帖子

/抱歉我的英语不好:) /

<div class="row-fluid">

            <?php
            $divCounter = 0;
            $postCounter = 1;

            $temp = $wp_query;
            $wp_query = null;
            $wp_query = new WP_Query();
            $wp_query->query('showposts=10&cat=2'.'&paged='.$paged);
            if ($wp_query->have_posts()) : while ($wp_query->have_posts()) : $wp_query->the_post(); ?>

            <!-- starting the loop -->
            <div class="span6">

                <p><?php the_title(); ?></p>

                <div class="row-fluid">
                    <div class="span5">
                        <?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID, 'thumbnail') ); ?>
                        <p><img src="<?php echo $url; ?>" /></p>
                    </div>
                    <div class="span7">
                        <?php the_excerpt(); ?>
                        <p><a class="btn" href="<?php the_permalink(); ?>">more &raquo;</a></p>
                    </div>
                </div>

            </div>

            <?php
            $allposts = $wp_query->post_count; //counting all posts in category
            $divCounter++; //divCounter states is: 1 or 2
            if ($divCounter == 2 && $postCounter < $allposts) { 
            // if we are on the second Span and our postCounter is smaller then allposts then we close the second Span and open a new Row 
            // so we close the second Span and open a new Row only when we have min. one post left and when we are on the second Span - else we write the last closing tag: </div> <!-- the last row -->
                echo '</div><div class="row-fluid">';
            $divCounter = 0; //reseting divCounter
            }

            if ($postCounter == $allposts) { //when the postCounter reach allposts then we closing the row - for example if you have only 1 post in category or in page2 (pagenation)
            echo '</div> <!-- the last row -->';
            }
            $postCounter++;
            ?>

            <!-- loop end -->
            <?php endwhile; ?>

Answer 6

在尝试了许多不同的答案之后，我成功地完成了引导程序 class="row" and class="col-md-6" divs 的动态生成。在这里我使用了php，但这可以通过任何其他服务器端脚本语言来实现。

<div class="container">
   <div class="row-fluid">  
  <?php 
      $c = 0;
      foreach( $items as $item ):
     $c++;
     // Closing PHP tag follows
     ?>
               <div class="col-md-6">
                    <?php echo $item; ?>
               </div>

     <?php
     if($c % 2 == 0) echo '</div><div class="row-fluid">'; 
   endforeach; ?>

  </div>

生成以下HTML代码：

<div class="span8 mutli-column">
    <div class="row-fluid">
        <div class="col-md-6">1</div>
        <div class="col-md-6">2</div>
    </div>
    <div class="row-fluid">
        <div class="col-md-6">3</div>
        <div class="col-md-6">4</div>
    </div>
    ....
</div>

php循环中的Bootstrap脚手架

6 个答案: