Question

我已尝试过这里发布的解决方案。 https://stackoverflow.com/a/19695851/7244133

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

这些似乎都不适用于循环。有任何想法吗？谢谢！

＆＃13;

 <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-->

＆＃13;

Answer 1

使用flexbox可以将等高列设置为Bootstrap的网格系统。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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>

使所有盒子的高度相同。使用Boostrap的Wordpress网格化后循环，

2 个答案: