如何使Boostrap中的网格响应变高？

Question

内部的div盒可以有不同的高度，但我需要总是在上面，就像vertical-align：top。

我现在显示此

但需要总是这样 Remeber，在平板电脑或手机...响应自举 PHP代码

   <?php 
       $args = array('post_type' => 'clientes'); 
       $loop = new WP_Query($args); 
       $i=0; 
       if ($loop->have_posts()) : while ($loop->have_posts()) : $loop->the_post(); 
        if ($i%2==0){ $bgcolor='#f3f3f3'; } else { $bgcolor='#fff'; } 
      ?> 
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2 partner" style="background-color: <?php echo $bgcolor; ?>"> 

         <img src="<?php echo get_field('logotipo');?>" alt="<?php echo get_the_title();?>"/> 
         <?php if(get_field('proyectos')): ?> 
          <ul> 
          <?php while(has_sub_field('proyectos')): ?> 
           <li> 
            <p class="nameproject"><?php the_sub_field('nombre_proyecto'); ?></p> 
            <p><?php the_sub_field('tipologia_proyecto'); ?></p> 
           </li> 
          <?php endwhile; ?> 
          </ul> 
         <?php endif; ?> 

        </div> 
      <?php 
        $i++; 
       endwhile; endif; 
      ?> 

Answer 1

唯一的办法我发现这样做（没有JavaScript）是将第n个项目放在（n％3）列中。您可能需要更改帖子的顺序。

// set defaults 
$index = 0; 
$post_cols = array('', '', ''); 

// start the loop 
while (have_posts()) { 
    the_post(); 

    //store posts in columns array 
    ob_start(); 
    get_template_part('content', get_post_format()); 
    $post_cols[$index % 3] .= ob_get_contents(); 
    ob_end_clean(); 

    $index++; 
}// end while 

//output column contents 
echo '<div class="row">'; 
foreach ($post_cols as $col) { 
    echo '<div class="col-md-4 post-col">'.$col.'</div>'; 
} 
echo '</div>'; 

您还需要确保删除第一列中项目的空白。

.post-col:nth-child(3n+3) { 
    margin-left:0; 
} 

Answer 2

在您的代码中，您已经为手机屏幕定义了col-xs-12。如果您想布局是相同的所有的屏幕尺寸，然后用更少的列

Answer 3

定义同事XS，如果你想创建一个Pinterest的风格布局，请您及时检查出Salvattore & masonary

还要检查这个thread在堆栈溢出 。会变得有用。