Question

我正在尝试构建一个wordpress搜索页面，在一个容器中包含一个侧边栏，该容器具有来自bootstrap css的“row”类。我的目标是将帖子显示在容器的左侧以及我想要显示在右侧的侧栏。目前，如果行容器在循环内，我得到的边栏数量与我的帖子相同。如果我将行容器移出循环，则侧边栏位于底部，而＆lt;“hr”＆gt;每个帖子之间的线被推到容器的右侧，或者如果我在侧边栏容器上使用浮动，我没有得到任何＆lt;“hr”＆gt;完全没有。

在推动＆lt;“hr”＆gt;时，我们非常感激。左侧的线条及其各自的帖子，并将侧边栏保持在全屏尺寸的右侧。作为参考，侧边栏位于行容器底部的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。

PHP循环的CSS代码结构

1 个答案: