如果可能的话,我希望在以下问题中得到一些帮助:
我在我的 Genesis 主题中使用了 Bootstrap 网格,并希望使用该网格显示搜索结果。
我使用以下代码创建了一个 search.php:
<?php
/**
* Search Results Template File
*/
get_header(); ?>
<header>
<h1>Search Results: "<?php echo get_search_query(); ?>"</h1>
<br>
</header>
<?php if ( have_posts() ) : // results found?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="gr-infos-container-cliente">
<div class="gr-promo-do-cliente"><?php the_field('tipo_de_promo');?></div>
<div class="gr-img-cliente"><a href="<?php the_permalink();?>" title="<?php the_title();?>"><img src="<?php echo get_field('foto_cliente_miniatura');?>" alt="" class="img-responsive center-block"></a></div>
<div class="gr-nome-cliente"><a href="<?php the_permalink();?>" title="<?php the_title();?>"><?php the_title();?></a></div>
<div class="gr-tagline-cliente"><?php the_field('tagline_do_anunciante');?></div>
<div class="gr-bairro-do-cliente"><i class="cliente fa fa-map-marker"></i><?php the_field('bairro_do_cliente');?></div>
</div>
</div>
</div> <!-- Row -->
</div> <!-- Container -->
<?php endwhile; ?>
<?php else : // no results?>
<article>
<h1>No Results Found.</h1>
</article>
<?php endif; ?>
<?php get_footer(); ?>
genesis();
但在搜索结果中,内容是一个接一个地对齐,而不是在选定的网格中。
有什么建议可以给我吗?
我非常感谢任何帮助!
最佳答案
这是因为您的“行”div 在 while 循环内,导致它生成多个“行”div 而不是一个。
要解决此问题,您需要将 while 循环放在“行”div 中。
试试下面的代码
<?php
/**
* Search Results Template File
*/
get_header(); ?>
<header>
<h1>Search Results: "<?php echo get_search_query(); ?>"</h1>
<br>
</header>
<?php if ( have_posts() ) : // results found?>
<div class="container-fluid">
<div class="row">
<?php while ( have_posts() ) : the_post(); ?>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="gr-infos-container-cliente">
<div class="gr-promo-do-cliente"><?php the_field('tipo_de_promo');?></div>
<div class="gr-img-cliente"><a href="<?php the_permalink();?>" title="<?php the_title();?>"><img src="<?php echo get_field('foto_cliente_miniatura');?>" alt="" class="img-responsive center-block"></a></div>
<div class="gr-nome-cliente"><a href="<?php the_permalink();?>" title="<?php the_title();?>"><?php the_title();?></a></div>
<div class="gr-tagline-cliente"><?php the_field('tagline_do_anunciante');?></div>
<div class="gr-bairro-do-cliente"><i class="cliente fa fa-map-marker"></i><?php the_field('bairro_do_cliente');?></div>
</div>
</div>
<?php endwhile; ?>
</div> <!-- Row -->
</div> <!-- Container -->
<?php else : // no results?>
<article>
<h1>No Results Found.</h1>
</article>
<?php endif; ?>
<?php get_footer(); ?>
genesis();
关于php - 带有 Bootstrap 的搜索结果页面中的 Wordpress 自定义布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30233741/