带有 PHP 循环的 CSS 代码结构

Question

我正在尝试构建一个 wordpress 搜索页面，以在一个容器中包含一个侧边栏，该容器具有来自引导 css 的“行”类。我的目标是让帖子显示在容器的左侧，而我想显示在右侧的侧边栏。目前，如果行容器在循环内，我会得到与帖子相同数量的侧边栏。如果我将行容器移出循环，则侧边栏位于底部，并且每个帖子之间的 行被推到容器的右侧，或者如果我在侧边栏容器上使用浮动，我不会'根本没有任何 行。

如果将 行及其各自的帖子向左推，并将右侧的侧边栏保持在全屏大小，我们将不胜感激。作为参考，侧边栏位于行容器底部的 include.php 文件中。

搜索页面代码：

<?php get_header(); ?>
<?php if ( have_posts() ) : ?>
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header"><?php printf( __( 'Search Results for: %s' ), esc_html( get_search_query() ) ); ?></h1>
            <ol class="breadcrumb">
                <li><a href="#">Home</a>
                </li>
                <li class="active">Blog</li>
            </ol>
        </div>
    </div>
        <div class="row">
            <?php
            // Start the loop.
            while ( have_posts() ) : the_post(); ?>
            <div class="col-lg-8">
                <h3>
                    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                </h3>
                <p>Posted on <?php the_time('F j, Y'); ?> by <?php the_author_posts_link(); ?>
                </p>
                <p><?php the_excerpt(); ?></p>
                <a class="btn btn-primary" href="<?php the_permalink(); ?>">Read More <i class="fa fa-angle-right"></i></a>
            </div>
    <hr> 
    <?php endwhile; ?>
                                    <?php include 'include.php'; ?>
        </div>
    <div class="navigation"><p><?php posts_nav_link('','&laquo; Newer Posts','Older Posts &raquo;'); ?></p></div>
    <?php else: ?>
      <p><?php _e('Sorry, there are no posts.'); ?></p>
    <?php endif; ?>

<?php get_footer(); ?>

感谢您的帮助和见解:)

Answer 1

您需要将您的 <div class="col-lg-8"> 移到您的 while() 语句之外，这样您就只有一个网格列，而不是每篇博文都位于其自己的网格列内。

这是假设您的侧边栏有 col-lg-4 类。