Question

使用WP Loop在页面上插入帖子。尝试使用Bootstrap columns class＆＃34; col-md-3＆＃34;来实现网格布局。例如。我能够找到有用的代码，但它缺少了我试图实现的部分。基本上，当您使用WP循环来拉动和显示页面上的帖子时，您可以放置Bootstrap列类＆＃34; col-md-43＆＃34;对于每个帖子。这样每个帖子都在一个列中，你基本上创建了一个帖子网格。看起来很棒，除了每行有不同的高度，然后你有奇怪的间距/间隙。

好的，那里有很多解决方案，我喜欢Zarko Jovic提出的解决方案。 https://stackoverflow.com/a/35963572/2243165

基本上解决方案是将列放在＆＃34;行＆＃34;类。问题解决了。

除非我根据屏幕尺寸有不同的列，否则我不知道如何解决这个问题。例如，我使用＆＃34; col-xs-12 col-sm-4 col-md-3＆＃34;。不知道是否可以创建一个针对3种不同列大小/类中的每一种进行调整的行。链接中的代码被写为连续使用4列。但是当使用＆＃34; col-xs-12 col-sm-4 col-md-3＆＃34; class该行有时有1列，有时是3列，其他时候每行有4列:(

到目前为止我的代码中没有放置＆＃34;行＆＃34;类。

<?php
// Force loop to display defined custom post type 
$args2 = array(
    'post_type' => 'i',
    'author' => get_queried_object_id(), 'showposts' => 100
    );

$editors_pages = new WP_Query($args2);

// The loop
if ($editors_pages->have_posts()) : while ($editors_pages->have_posts()) : $editors_pages->the_post(); ?> 

<div class='col-xs-12 col-sm-4 col-md-3'>
    <div class='author-pages-title'><h4><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h4></div>
</div>

<?php endwhile; else : ?>
    <p class='align-center'>Sorry, no pages posted yet by this user.</p>
<?php endif;
wp_reset_postdata();

?>

Answer 1

解决此问题的一个好方法是为列提供最小高度。这可能需要对每个尺寸进行媒体查询，即xs，md。

// The loop

<div class="row"> // put a div 
if ($editors_pages->have_posts()) : while ($editors_pages->have_posts()) : $editors_pages->the_post(); ?> 

<div class='special-min-height col-xs-12 col-sm-4 col-md-3'> // add a class to reference too.
    <div class='author-pages-title'><h4><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h4></div>
</div>

<?php endwhile; else : ?>
    <p class='align-center'>Sorry, no pages posted yet by this user.</p>
<?php endif;

</div>

<强> CSS

.row .special-min-height {
    min-height: 200px;
}

然后你可以为剩余的屏幕写下媒体查询，给出不同的最小高度。

Answer 2

使用以下css属性来解决问题。

height: 100px;
overflow:auto;

通过这种方式，你所有的盒子都有相同的高度，如果内容更多，那么给定的高度将自动添加一个卷轴并调整你的内容。

调整Bootstrap＆＃34; row＆＃34;适合各种＃列;＃34; col-xs-12 col-sm-4 col-md-3＆＃34;？

2 个答案: