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

Question

内部 div 框可以有不同的高度，但我需要始终在上方，例如 vertical-align:top。

我现在展示这个

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

Answer 2

在您的代码中，您为移动屏幕定义了 col-xs-12。如果您希望所有屏幕尺寸的布局都相同，请使用较少的列定义 col-xs

Answer 3

如果您正在尝试创建 pinterest 风格的布局。请查看 Salvattore & masonary

还要在 Whosebug 中检查这个 thread。会有用的。

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

How do I make a grid responsive with variable height in Boostrap?

php

grid

jquery

responsive-design

twitter-bootstrap