Bootstrap Scaffolding in php's loop

问题

How do I make scaffolding if I would like to show grids next to each other. My actual codes

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

grids are showing like

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

I would like to show

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

回答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>

With use of % Modulus, you can calculate every second iteration, thus break into a new .row-fluid row, to get yourself into a HTML structure like below:

<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>

Here's a Fiddle constructed with the above:

回答2:

Maybe this is not the best solution, but can help you to solve your problem. Note I don't tested this code. So, take a look at idea.

<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>

回答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 -->

回答4:

use this code:

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

回答5:

Updated: my own very simple but working solution for posts looping in two columns (in bootstrap for example) - posts from specific category ID

/ sorry for my poor english :) /

<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; ?>

回答6:

After trying many different answers, I succeeded to accomplish dynamic generation of bootstrap class="row" and class="col-md-6" divs . Here I used php but this can achieve by any other server side scripting language.

<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>

Which produces the following HTML code:

<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>

来源：https://stackoverflow.com/questions/20031209/bootstrap-scaffolding-in-phps-loop