将侧边栏与我的主要内容引导程序对齐

Question

I am using Bootstrap and WordPress to create a website. I have a my main content that is 8 columns and then my sidebar which is 4. On my normal pages I put them both in one row so they align correctly, however with this page, I used the WordPress loop to create many rows with content in, this means my sidebar is then not in the same row as my content and gets pushed to below it on the screen. Is it possible to align them horizontally?

Here is the code I'm using.

<?php if ( $wp_query->have_posts() ) : while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
<div class="row case-studies">
     <div id="page_content">
         <div class="col-md-8">
            <div class="case_summary_image col-md-4">
                    <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('casestudy img-responsive');?></a>
            </div>
                <div class="case_summary col-md-8"></a>
                    <a style="font-size:18px; line-height:30px; color:#666666; font-weight:bold; text-decoration:none" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>

                        <?php the_excerpt(); ?>

                </div>
        </div>
</div>
</div>

<!-- sidebar -->


<?php endwhile; endif; ?>

<div class="col-md-4">
<?php get_sidebar();?>
</div>

Answer 1

您仍然需要一个容器或一行来包含内容和侧栏，以使各列​​按您希望的那样工作。

Answer 2

You must create loop main area and add class to this. So,

<div class="col-md-8">
<!-- your loop, wp query -->
</div>

<div class="col-md-4">
<!-- your theme sidebar -->
</div>

In summary, you must have one col-md-8 and one col-md-4.