php - 3 element per row in bootstrap/Wordpress -
i have following problem: need create simple layout, on each line have 3 box of same size, , if understood right, in order achieve need construct structure following:
<div class="row"> <div class=" news col-md-3 col-centered"> </div> <div class=" news col-md-3 col-centered"> </div> <div class=" news col-md-3 col-centered"> </div> </div> this php script in index.php:
<?php while(have_posts()) : the_post();?> <div class="row"> <div class=" news col-md-3 col-centered"> <h4><a href="<?php the_permalink();?>"><?php the_title();?></a></h4> <p><?php the_excerpt(); ?> </p> </div> </div> <?php endwhile; wp_reset_query(); ?> with code, each box <div class="row"> element following:
<div class="row"> <div class=" news col-md-3 col-centered"> </div> </div> ... how can fix this?
this now: if box more height another, leave space under without element. 
the height of box depends on content. have this: 
just move row outside of loop, it's not repeated:
<div class="row"> <?php while(have_posts()) : the_post(); ?> <div class="news col-md-4 col-centered"> <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4> <p><?php the_excerpt(); ?> </p> </div> <?php endwhile; wp_reset_query(); ?> </div> also, need change column width col-md-4, since bootstrap uses 12-column grid, , want 3 columns per row.
if need close out each row after 3 columns shown, need use counter:
<div class="row"> <?php $i = 1; while(have_posts()) : the_post();?> <div class="news col-md-3 col-centered"> <h4><a href="<?php the_permalink();?>"><?php the_title();?></a></h4> <p><?php the_excerpt(); ?> </p> </div> <?php if ( $i % 3 === 0 ) { echo '</div><div class="row">'; } ?> <?php $i++; endwhile; wp_reset_query(); ?> </div> this last example ensure floats cleared, , each row of elements on own lines.
Comments
Post a Comment