带有PHP循环的CSS代码结构


CSS Code Structure with PHP Loops

我正在尝试构建一个wordpress搜索页面,以便在具有引导css中的"row"类的容器中包含侧边栏。我的目标是让帖子显示在容器的左侧,而我想在右侧显示侧边栏。目前,如果行容器在循环中,我得到的侧边栏数量与我的帖子相同。如果我将行容器移出循环,要么侧边栏在底部,每个帖子之间的<"hr">行被推到容器的右侧,要么如果我在侧边栏容器上使用 float,我根本没有任何<"hr">行。

任何见解都可以将<"hr">行与各自的帖子一起向左推,并将侧边栏保持在全屏尺寸。作为参考,侧边栏位于行容器底部的 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(); ?>

感谢您的任何帮助和见解:)

您需要

<div class="col-lg-8">移到while()语句之外,以便只有一个网格列,而不是每个博客文章都位于其自己的网格列内。

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