引导网格未正确对齐

Posted 2023-03-04

技术标签:

【中文标题】引导网格未正确对齐【英文标题】：Bootstrap grid is not correctly aligning 【发布时间】：2018-04-08 02:37:53 【问题描述】：

在我的搜索结果页面上，我每行有 2 个帖子 (col-md-6)。网格工作正常并且所有内容都正确对齐，除非摘录或帖子标题比其他摘录或帖子标题长。在我的测试站点上，我的帖子的所有标题和摘录都只有 1 行，而我有 1 篇帖子的标题为一行，摘录为两行。由于摘录是两行，它与其余帖子的对齐方式相混淆。我该如何解决这个问题，以便无论摘录的长度如何，所有帖子都正确对齐？

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

当摘录较长时，它会搞砸对齐

我正在附上我的所有 php 文件，这些文件与我的搜索页面一起使用。但是，主文件是list-search-template.php（最后一个）

搜索.php

<?php get_header(); ?>
<div class="content-holder clearfix">
    <div class="container">
    <div class="search-results-search">
<form role="search" method="get" class="search-form-search form-inline-search" action="">
            <div class="input-group-search">
                <input type="search" value="" name="s" class="input-sm-search search-field-search form-control-search" placeholder="<?php echo $s ?>">
            </div>
        </form>
    </div>
                <div class="row">
                    <div class="col-md-12" >
                        <div class="grid js-masonry ajax-container row">
                         <?php 
						get_template_part("loop/loop-search"); ?>
                    </div>
                        <?php get_template_part('post-template/post-nav'); ?>

                </div>
    </div>
</div>
<footer class="footer">
<?php get_template_part('wrapper/wrapper-footer'); ?>
</footer>
<?php get_footer(); ?>

循环搜索.php

<?php /* Loop Name: Loop list-posts blog */ ?>
<?php 
	 if (have_posts()) : 
	 while (have_posts()) : the_post();
	 ?>
<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 
		endwhile; wp_reset_postdata(); ?>

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

<?php endif; ?>

列表搜索模板.php

<?php 
/**
* Grid post template
*/
?>
<?php 

?> 
<div class="post_content">

 
<div class="post_content grid-block <?php echo esc_attr(); ?>">
    
<?php  if(has_post_thumbnail())  ?>

    <?php

if(has_post_format('video'))
$embed = get_post_meta(get_the_ID(), 'novablog_video_embed', true);
$vimeo = strpos($embed, "vimeo");
   $youtube = strpos($embed, "youtu");
if($youtube !== false)
$video_id = str_replace( 'http://', '', $embed );
   	$video_id = str_replace( 'https://', '', $video_id );
       $video_id = str_replace( 'www.youtube.com/watch?v=', '', $video_id );
       $video_id = str_replace( 'youtube.com/watch?v=', '', $video_id );
       $video_id = str_replace( 'youtu.be/', '', $video_id );
       $video_id = str_replace( '&feature=channel', '', $video_id );
$link = '//www.youtube.com/embed/'.esc_attr($video_id);

if($vimeo !== false)

       //Get ID from video url
       $video_id = str_replace( 'http://vimeo.com/', '', $embed );
       $video_id = str_replace( 'http://www.vimeo.com/', '', $video_id );
$video_id = str_replace( 'https://vimeo.com/', '', $video_id );
$link = '//player.vimeo.com/video/'.esc_attr($video_id);



?>
    
<?php if(has_post_format('video')) ?>
<a class="popup-youtube" href="<?php echo esc_attr($link); ?>" title="<?php the_title_attribute(); ?>">
<?php if(has_post_format('video'))
echo '<div class="cover-video"></div>';
   ?>

<?php  ?>
    
                    <div class="two-front-container">
                        <a title="<?php the_title_attribute(); ?>" href="<?php the_permalink(); ?>"><?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?></a>
                    </div>

<?php  ?>
</div>
                        <div>
                    <div class="front-page-date"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></div>
                    <div class="front-page-post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
                            <div class="post_content"><p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p><div class="clear"></div></div>
                    <div class="front-page-post-info">
                        <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
                        <?php get_template_part( 'includes/front-shop-the-post' ); ?>
                        <?php get_template_part( 'includes/share-buttons' ); ?>
                        <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
                    </div>
                                                        
     </div>
</div>

【问题讨论】：

如果可能，不要显示摘录，或者设置一个最小高度，以覆盖 2 行摘录。我认为更简单的解决方案是将摘录字符数限制为一行，如果您想保留完整摘录，您可以从所有 div（col-md-6）中找到最高高度，然后设置所有“的默认高度” col-md-6" 来自使用 jquery 【参考方案1】：

我发现解决此问题的最简单方法是使用 clearfix，但使用 Bootstrap 的 responsive utilities 仅在所需的视口大小处使用 clearfix。您无需担心打开和关闭rows。

这是a JSFiddle demonstration的截图：

请注意，JSFiddle 使用 http://lorempixel.com/ 处理图像，有时加载速度可能很慢 - 给它一些时间。

要在您的代码中实现这一点，只需在loop-search.php 中添加一个$count，并在每第二个帖子中添加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; ?>

clearfix 不适用于 xs 和 sm 视口，因此仅在 md 或更大时有效 - 这正是您想要的。

注意 - 你的代码中有 js-masonry 类，如果你真的在使用 Masonry.js，那可能会搞砸。也许您正在试验它而不是试图让这种水平对齐工作？如果您现在不使用它，请确保您已删除 JS 链接并删除类以避免混淆。

【讨论】：

您介意将我的其余代码放入 loop-serach.php 吗？我试了，报错了，可能是我加错了。 @user6738171 好的，完成。为了便于阅读，我重新格式化了一下。如果错误仍然存在，请告诉我。还是有错误，页面上没有帖子出现，我的导航栏有点乱。我正在使用的预制主题必须使用 masonry.js，它把事情搞砸了。无论如何感谢您的帮助。 @user6738171 我添加的代码不会导致这种情况 - 将其注释掉以确认。但是如果涉及到 Masonry.js，这一切都不会奏效 - Masonry 的重点是重新调整事情，与我们在这里尝试做的事情背道而驰。【参考方案2】：

由于您将它们全部放在同一行中，因此没有明确的修复。由于您的宽度为 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 篇文章之间，会出现大约 30 个加载更多按钮（因此我的页面上大约有 100 个加载更多按钮）。你知道为什么会这样吗？我没有，特别是没有整个主题的副本来完成，也许有一个类添加这些按钮的逻辑。你可以尝试一个简单的<div class="row"> 看看会发生什么，但我怀疑样式会与第一行不一致。【参考方案3】：

以下代码将帮助您在每 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; ?>

我认为加载更多按钮的问题将是因为缺少 div 结束标记。

【讨论】：

【参考方案4】：

有一个非常简单的解决方案。您需要执行 2 个步骤。

从“search.php”中删除<div class="grid js-masonry ajax-container row">。

使用以下代码编辑“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; ?>

【讨论】：

【参考方案5】：

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

但在你的情况下，我认为你使用的是引导程序，你可以做的是获得 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

);

观看现场演示here

【讨论】：

【参考方案6】：

使用 css 给摘录一个固定的高度。然后文本是否可用。它需要那个高度。

【讨论】：

【参考方案7】：

也许您可以强制使用 1 行标题和摘录。检查下面的示例。

.caption h3, .caption p 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="thumbnail">
        <img src="http://i68.tinypic.com/161z3fc.jpg"   >
        <div class="caption">
          <h3 title="Card 1 is not like the rest cards. It's title is longer than the others.">Card 1 is not like the rest cards. It's title is longer than the others.</h3>
          <p>Short excerpt</p>
        </div>
      </div>
    </div>

    <div class="col-md-6">
      <div class="thumbnail">
        <img src="http://i68.tinypic.com/161z3fc.jpg"   >
        <div class="caption">
          <h3 title="Card 2">Card 2</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis auteirure dolor in reprehenderit in voluptate velit esse</p>
        </div>
      </div>
    </div>


    <div class="col-md-6">
      <div class="thumbnail">
        <img src="http://i68.tinypic.com/161z3fc.jpg"   >
        <div class="caption">
          <h3 title="Card 3">Card 3</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis auteirure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
      </div>
    </div>

    <div class="col-md-6">
      <div class="thumbnail">
        <img src="http://i68.tinypic.com/161z3fc.jpg"   >
        <div class="caption">
          <h3 title="Card 4">Card 4</h3>
          <p>Another short excerpt</p>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

编辑如果您选择强制只有一行，卡片标题和摘录，然后尝试在卡片标题中添加title 属性。例如。

<h3 title="Card 1 is not like the rest cards. It's title is longer than the others.">Card 1 is not like the rest cards. It's title is longer than the others.</h3>

【讨论】：

以上是关于引导网格未正确对齐的主要内容，如果未能解决你的问题，请参考以下文章

引导网格对齐不准确，不会响应 .css 文件

如何在引导流体布局中底部对齐网格元素

如何正确对齐 ExtJs 网格

uicollectionview 单元格位置未在网格上对齐

引导网格无法正确显示

InvalidOperationException 未处理 - 数据网格视图问题