如何在Bootstrap中使用可变高度响应网格？

Question

内部div盒可以有不同的高度，但我需要始终在上面，就像垂直对齐：顶部。

我现在展示这个

但总是需要这样 记住，平板电脑或移动...响应性的助推器 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

如果您正在尝试创建pinterest样式布局。请查看Salvattore＆amp; masonary

同样在stackoverflow中检查此thread。会变得有用。