php - 如何在 Bootstrap 中使网格具有可变高度响应？

Question

内部 div 框可以有不同的高度，但我需要始终位于上方，就像垂直对齐:顶部。

我现在展示这个

但总是需要这样 请记住，在平板电脑或移动设备中...响应式 boostrap 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;
}