调整 Bootstrap "row" 以适应不同的列数 "col-xs-12 col-sm-4 col-md-3"？

Question

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

好的，现在有很多解决方案，我喜欢 Zarko Jovic 提出的那个。

基本上解决方案是将列放在 "row" class 中。问题解决了。

这很有效，但如果我根据屏幕尺寸有不同的列，我不确定如何去做。例如我使用 "col-xs-12 col-sm-4 col-md-3"。不知道是否可以创建一个行来针对 3 个不同的列 sizes/classes 中的每一个进行调整。 link 中的代码被编写为连续使用 4 列。但是当使用 "col-xs-12 col-sm-4 col-md-3" class 时，该行有时每行有 1 列，有时有 3 列，有时有 4 列:(

到目前为止，这是我的代码，没有放置 "row" class。

<?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 "row" 以适应不同的列数 "col-xs-12 col-sm-4 col-md-3"？

Adjust Bootstrap "row" to fit various # of columns "col-xs-12 col-sm-4 col-md-3"?

php

wordpress

row

adjustable

twitter-bootstrap-3