Question

我使用Bootstrap和WordPress创建网站。我的主要内容是8列，然后我的侧边栏是4.在我的常规页面上，我将它们放在一行中，以便它们正确对齐，但是对于此页面，我使用WordPress循环创建了许多内容行在，这意味着我的侧边栏与我的内容不在同一行，并被推到屏幕下方。是否可以水平对齐它们？

这是我正在使用的代码。

<?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

您必须创建循环主区域并为此添加类。所以，

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

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

总之，您必须有一个col-md-8和一个col-md-4。

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

2 个答案: