使所有箱子的高度相同。 WordPress的網格後循環使用Boostrap，

Question

我試過在這裏發佈的解決方案。 https://stackoverflow.com/a/19695851/7244133

而這一次...... https://scotch.io/bar-talk/different-tricks-on-how-to-make-bootstrap-columns-all-the-same-height

沒有這些似乎與循環工作。有任何想法嗎？謝謝！下面

<div class="container my-container"> 
 
     <?php 
 
     $args=array(
 
      'post_type' => 'post', 
 
      'category_name' => 'Business', 
 
      'posts_per_page' => 3 
 
     ); 
 
     $my_query = null; 
 
     $my_query = new WP_Query($args); 
 

 
     if($my_query->have_posts()) { 
 

 
      $i = 0; 
 
      while ($my_query->have_posts()) : $my_query->the_post(); 
 
      // modified to work with 3 columns 
 
      // output an open <div> 
 
      if($i % 3 == 0) { ?> 
 
     <div class="row is-flex"> 
 
      <?php 
 
      } 
 
      ?>    
 
      <div class="col-md-4"> 
 
       <div class="grid-loop"> 
 
        <div class="custom-border"> 
 
         <a class="perm_link" href="<?php the_permalink(); ?>"> 
 
          <h2><?php the_title(); ?></h2> 
 
          <div class="blog-image image-responsive"><?php the_post_thumbnail('img-251x250'); ?></div></a> 
 
         <p><?php the_excerpt(); ?></p> 
 
         <span class="shortlink"> 
 
          <button class="btn btn-success"><?php the_shortlink("Read More"); ?></button> 
 
         </span> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <?php $i++; 
 
      if($i != 0 && $i % 3 == 0) { ?> 
 
     </div><!--/.row--> 
 
     <div class="clearfix"></div> 
 

 
     <?php 
 
      } ?> 
 

 
     <?php 
 
      endwhile; 
 
     } 
 
     wp_reset_query(); 
 
     ?> 
 
    </div><!--/.container-->

Answer 1

使用flexbox可以設置等高列來引導的電網系統。

.row-eq-height { 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display:   flex; 
 
} 
 

 
.grid-loop{ 
 
    border:1px solid #ddd; 
 
    background-color: rgba(86,61,124,.15); 
 
    height:100%; 
 
    padding:10px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container my-container"> 
 
<div class="row row-eq-height"> 
 
    <div class="col-sm-4"> 
 
    <div class="grid-loop"> 
 
     <div class="custom-border"> 
 
     <a class="perm_link" href="<?php the_permalink(); ?>"> 
 
      <h2>Title</h2> 
 
      <div class="blog-image image-responsive"><?php the_post_thumbnail('img-251x250'); ?></div></a> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
cillum dolore eu fugiat nulla pariatur. </p> 
 
     <span class="shortlink"> 
 
      <button class="btn btn-success">Read More</button> 
 
     </span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="col-sm-4"> 
 
    <div class="grid-loop"> 
 
     <div class="custom-border"> 
 
     <a class="perm_link" href="<?php the_permalink(); ?>"> 
 
      <h2>Title</h2> 
 
      <div class="blog-image image-responsive"><?php the_post_thumbnail('img-251x250'); ?></div></a> 
 
     <p>this is a much taller column than the others Excepteur sint occaecat cupidatat non 
 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
     <span class="shortlink"> 
 
      <button class="btn btn-success">Read More</button> 
 
     </span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="col-sm-4"> 
 
    <div class="grid-loop"> 
 
     <div class="custom-border"> 
 
     <a class="perm_link" href="<?php the_permalink(); ?>"> 
 
      <h2>Title</h2> 
 
      <div class="blog-image image-responsive"><?php the_post_thumbnail('img-251x250'); ?></div></a> 
 
     <p>this is a much smaller column than the others</p> 
 
     <span class="shortlink"> 
 
      <button class="btn btn-success">Read More</button> 
 
     </span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div>

Answer 2

如果你可以使用CSS然後使用flex屬性，這是例如，對於同一高度框。

.main { 
 
      display: flex; 
 
     } 
 
     .child { 
 
      flex:1; 
 
      border:1px solid tomato; 
 
     } 
 
     .content { 
 
      display: flex; 
 
      justify-content: flex-start; 
 
      align-items: center; 
 
      flex-flow: column nowrap; 
 
     } 
 
     .content-child{ 
 
      padding: 5px; 
 
     }

<div class="main"> 
 
    <div class="child"> 
 
     <div class="content"> 
 
      <div class="content-child"> 
 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
      </div> 
 
      <div class="content-child"> 
 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="child"></div> 
 
</div>