Php 引导网格未正确对齐

在我的搜索结果页面上，我每行有2篇帖子（col-md-6）。网格运行良好，所有内容都正确对齐，除非摘录或文章标题比其他摘录或文章标题长。在我的测试站点上，我有一行文章的所有标题和摘录，还有一行文章的标题是一行，摘录是两行。由于摘录是两行，它与其余的文章对齐混乱。我怎样才能解决这个问题，使所有的文章无论摘录的长度都正确对齐

当摘录和文章标题长度相同时，所有内容都对齐

当摘录较长时，它会拧紧对齐

我正在附加我的搜索页面附带的所有php文件。但是，主文件是list-search-template.php（最后一个）

search.php

由于您将它们都放在同一行中，因此没有clearfix。由于宽度为12或6（全部或一半），因此可以每隔一个帖子关闭（并重新打开）一行。在小屏幕的情况下，并排的高度无关紧要，因为每个帖子都在自己的线上

    <?php /* Loop Name: Loop list-posts blog */ ?>
    <?php 
         if (have_posts()) : 
         $postCount = 0; // Initialize counter
         while (have_posts()) : the_post();
         $postCount++; // Increment counter
         ?>
    <div id="post-<?php the_ID(); ?>" class="post-list_h ajax-post-wrapper block col-xs-12 col-sm-6 col-md-6" > 
    <?php 
       get_template_part('post-template/list-search-template'); 
    ?>
    </div>

    <?php 
     // Print row if needed
     if($postCount % 2 == 0):
?>
     </div><div class="grid js-masonry ajax-container row">
<?php
      endif;
            endwhile; wp_reset_postdata(); ?>

            <?php else: ?>

    <?php get_template_part( 'content', 'none' ); ?>

    <?php endif; ?>

<!-- end snippet -->


以下代码将帮助您在每2列之后正确添加行

    <?php /* Loop Name: Loop list-posts blog */ ?>
<?php 
if (have_posts()) : 
    $counter  = 0;
    while (have_posts()) : the_post();
        $post_count = $GLOBALS['wp_query']->post_count;

?>
<?php if($counter++%2==0){ ?>
<div class="row">
<?php } ?>
    <div id="post-<?php the_ID(); ?>" class="post-list_h ajax-post-wrapper block col-xs-12 col-sm-6 col-md-6" >
    <?php
        get_template_part('post-template/list-search-template'); 
    ?>
    </div>
<?php if($counter%2==0 || $counter == $post_count){ ?>
</div>
<?php } ?>
<?php
    endwhile; wp_reset_postdata(); ?>

<?php else: ?>

<?php get_template_part( 'content', 'none' ); ?>

<?php endif; ?>


有一个非常简单的解决方案。您需要遵循两个步骤

从“search.php”中删除

使用以下代码编辑“loop search.php”：

<?php /* Loop Name: Loop list-posts blog */ ?>
<?php 
if (have_posts()) : 
$cnt = 1;
$endRow = false;
while (have_posts()) : the_post();
?>
<?php 
if($cnt%2 != 0){
$endRow = true; 
?>
<div class="grid js-masonry ajax-container row">
<?php } ?>
<div id="post-<?php the_ID(); ?>" class="post-list_h ajax-post-wrapper block col-xs-12 col-sm-6 col-md-6" > 
<?php get_template_part('post-template/list-search-template');  ?>
</div>
<?php 
if($cnt%2 == 0){        
$endRow = false;
?>
</div>
<?php } ?>
<?php 
$cnt++; 
endwhile; wp_reset_postdata(); ?>
<?php else: ?>
<?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>


解决此问题的正确方法是使用css属性
display:flex
请参见

但是在您使用bootstrap的情况下，我认为您可以做的是获得div的最高高度，并使用jquery将其应用于所有
div
，例如：

jQuery(document).ready(function($){
    var $divs = $('.row > div');
    var highest = [];

  $.each($divs, function($index, $item) {
    highest.push($($item).height()); // Push all divs height into array
  })

  function compareNumbers(a, b) {
     return b - a;
  }

  //console.log();
  highest = highest.sort(compareNumbers); // sort Array

  $('.row > div').height(highest[0]) // Apply the highest height to all divs

});

请参阅live demo我发现解决此问题的最简单方法是使用
clearfix
，但使用引导仅在您想要的视口大小下使用
clearfix
。您不必担心打开和关闭
行
s

以下是一个屏幕截图：


请注意，JSFIDLE用于图像，有时它们的加载速度可能会很慢——给它一些时间

要在代码中实现这一点，只需在
loop search.php
中添加一个
$count
，并每隔2篇文章包含
clearfix
：

<?php /* Loop Name: Loop list-posts blog */

$count = 0;

if (have_posts()) : 
    while (have_posts()) : the_post(); 
        $count++; 
        ?>
        <div id="post-<?php the_ID(); ?>" class="post-list_h ajax-post-wrapper block col-xs-12 col-sm-6 col-md-6" > 
            <?php get_template_part('post-template/list-search-template'); ?>
        </div>

        <?php if ($count%2 === 0) { ?>
            <div class="clearfix hidden-xs hidden-sm"></div>
        <?php }
    <?php endwhile; wp_reset_postdata(); ?>

<?php else: ?>
    <?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>


也许你可以强迫自己有一行标题和摘录。检查下面的示例


.caption h3、.caption p{
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
最大宽度：100%；
}

卡1与其他卡不同。它的标题比其他的长。
摘录

卡2
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。在沃鲁帕特·维利特·埃塞的《雷德亨德雷特》中，两人都是独角戏演员

卡片3
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。这两个词都是用在“无教区”中的“无教区”中。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

卡4
另一个简短摘录

使用css为摘录指定固定高度。然后，如果文本可用或不可用。它将达到该高度。
此代码产生错误。在每一行的两篇文章之间，大约有30个加载更多按钮出现（因此我的页面上大约有100个加载更多按钮）。你知道为什么会发生这种情况吗？我不知道，尤其是在没有整个主题的副本的情况下，也许有一个类添加了这些按钮。您可以尝试一个简单的
，看看效果如何，但我怀疑样式会与第一行不一致。如果可能，请不要显示摘录，或设置一个最小高度以覆盖两行摘录。我认为更简单的解决方案是将摘录字符数限制为一行，如果您想保留完整摘录，可以从所有div中找到最高高度（col-md-6），然后使用jquery设置所有“col-md-6”的默认高度您介意将我的其余代码放入loop-serach.php吗？我试过了，但出现了一个错误，所以我可能添加错了。@user6738171好的，完成。为了便于阅读，我重新格式化了一点。如果错误仍然存在，请告诉我。仍然存在错误，页面上没有显示任何帖子，我的导航栏有点乱。我使用的预先制作的主题必须使用massy.js，它把事情搞砸了。无论如何，谢谢你的帮助。@user6738171我添加的代码不会导致这种情况-请将其注释掉以确认。但是如果涉及到massy.js，这一切都不会起作用-massy的全部目的是重新调整与我们在这里尝试做的相反的事情。