调整引导程序“行”以适应各种列“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"?调整引导程序“行”以适应各种列“col-xs-12 col-sm-4 col-md-3”？
【发布时间】：2018-01-09 02:51:12
【问题描述】：

使用 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();

?>

【问题讨论】：

标签： php wordpress twitter-bootstrap-3 row adjustable

【解决方案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;
}

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

【讨论】：

【解决方案2】：

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

height: 100px;
overflow:auto;

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

【讨论】：