我希望搜索结果显示在列中，但只有文本才会显示

Question

I've got a WP plugin that posts search results. Here is the results php:

<?php
/**
 * Search & Filter Pro 
 *
 * Sample Results Template
 * 
 * @package   Search_Filter
 * @author    Ross Morsali
 * @link      http://www.designsandcode.com/
 * @copyright 2015 Designs & Code
 * 
 * Note: these templates are not full page templates, rather 
 * just an encaspulation of the your results loop which should
 * be inserted in to other pages by using a shortcode - think 
 * of it as a template part
 * 
 * This template is an absolute base example showing you what
 * you can do, for more customisation see the WordPress docs 
 * and using template tags - 
 * 
 * http://codex.wordpress.org/Template_Tags
 *
 */


if ( $query->have_posts() )
{

    ?>

    Found <?php echo $query->found_posts; ?> Results<br />
    Page <?php echo $query->query['paged']; ?> of <?php echo $query->max_num_pages; ?><br />


    <div class="pagination">

        <div class="nav-previous"><?php next_posts_link( 'Older posts', $query->max_num_pages ); ?></div>
        <div class="nav-next"><?php previous_posts_link( 'Newer posts' ); ?></div>
        <?php
            /* example code for using the wp_pagenavi plugin */
            if (function_exists('wp_pagenavi'))
            {
                echo "<br />";
                wp_pagenavi( array( 'query' => $query ) );
            }
        ?>
    </div>

    <?php
    while ($query->have_posts())
    {
        $query->the_post();

        ?>

<div>
            <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <?php 
                if ( has_post_thumbnail() ) {
                    echo '<p>';
                    the_post_thumbnail("small");
                    echo '</p>';
                }
            ?>
            <p><br /><?php the_excerpt(); ?><p>
</div>

        <?php
    }
    ?>
    Page <?php echo $query->query['paged']; ?> of <?php echo $query->max_num_pages; ?><br />

    <div class="pagination">

        <div class="nav-previous"><?php next_posts_link( 'Older posts', $query->max_num_pages ); ?></div>
        <div class="nav-next"><?php previous_posts_link( 'Newer posts' ); ?></div>
        <?php
            /* example code for using the wp_pagenavi plugin */
            if (function_exists('wp_pagenavi'))
            {
                echo "<br />";
                wp_pagenavi( array( 'query' => $query ) );
            }
        ?>
    </div>
    <?php
}
else
{
    echo "No Results Found";
}

?>

Now I want the RESULTS (posts) to appear in 2 columns, however, when I try this:

<div class="container">
    <div class="row">
        <div class="col-md-2">
            <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <?php 
                if ( has_post_thumbnail() ) {
                    echo '<p>';
                    the_post_thumbnail("small");
                    echo '</p>';
                }
            ?>
            <p><br /><?php the_excerpt(); ?><p>
</div>
</div>
</div>

I can see that the text (p) appears in columns, but not the results.

How exactly do I achieve my goal?

Answer 1

There are a couple of mistakes. First col-md-2 makes a div of 2 columns wide out of a 12 column layout. So it's a sixth and not half. It should be col-md-6.

Then the next problem is for each post you add a container, row and col. But you should only have 1 container and 1 row. And for each post you should make the column div.

<!-- 1 container and row -->
<div class="container">
<div class="row">    
<?php
  while ($query->have_posts()){
    $query->the_post();
?>
    <!-- a six column wide div for each post -->
    <div class="col-md-6">
      <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
      <?php 
        if ( has_post_thumbnail() ) {
          echo '<p>';
            the_post_thumbnail("small");
          echo '</p>';
        }
      ?>
      <p><br /><?php the_excerpt(); ?><p>
  </div>

<?php
  }
?>
</div>
</div>