1

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

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

基本上解决方案是将列放在“行”类中。问题解决了。

这可行，但如果我根据屏幕大小有不同的列，我不知道该怎么做。例如，我使用“col-xs-12 col-sm-4 col-md-3”。不知道是否可以创建一个针对 3 个不同列大小/类中的每一个进行调整的行。链接中的代码编写为连续使用 4 列。但是当使用“col-xs-12 col-sm-4 col-md-3”类时，该行有时有 1 列，有时 3 列，有时每行 4 列 :(

到目前为止，这是我的代码，没有放置“行”类。

<?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();

?>
4

2 回答 2

0

解决此问题的一个好方法是为您的列指定最小高度。这您可能需要针对每种尺寸（即 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;
}

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

于 2017-08-02T05:09:48.443 回答
0

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

height: 100px;
overflow:auto;

通过这种方式，您所有的框都将具有相同的高度，如果内容更多，那么给定的高度将自动添加滚动并调整其中的内容。

于 2017-08-02T08:16:53.120 回答