将边栏与我的主内容引导对齐

我使用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>

来源

2014-10-27 pocockn

为什么不把这个循环放在行内，这样一行就包含了在'col-md-8'和侧栏中生成的内容，但内容是在'col-md-8'中？ – 2014-10-27 16:50:00

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

来源

2014-10-27 16:56:22 vcanales

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

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

来源

2014-10-27 17:03:58

将边栏与我的主内容引导对齐

回答

相关问题