Question

我正在使用Twitter Bootstrap框架在WordPress上创建一个网站。

我有一个循环，通过我的案例研究并在页面上打印到8列宽的空间，然后我尝试将我的侧边栏放在这些案例研究的旁边，宽度为4.但是这只是推动我的侧边栏到页面底部。我发现的唯一解决方案是给它一个负边距顶部，这样做会使我的背景图像与其他页面不同，因此无法使用它。

这是我的代码，它生成案例研究，然后生成我的侧边栏。

谢谢！

<?php if ( $wp_query->have_posts() ) : while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
<div class="row case-study-block">
     <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>
                    <p><?php the_excerpt(); ?></p>
                </div>
        </div>
</div>
</div>
<!-- sidebar -->
<?php endwhile; endif; ?>
<div class="clear"></div>
<div class="row">
<div id="page_content">
<div class="col-md-4 pull-right">
<?php get_sidebar('case');?>
</div>

Answer 1

对我来说，看起来你的引导程序的html结构是错误的。试试这个结构：

<div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="row">
                <!-- WP post loop -->    
            </div>            
        </div>
        <div class="col-md-4">
            <?php get_sidebar('case');?>
        </div>
    </div>
</div>

您还有两次身份page_content。 ID必须是唯一的！

如果你想将col-xx-xx嵌套到其他col-xx-xx中（就像你在case-study-block循环中所做的那样），你需要包装col'＃s。首先进入新的.row。在此处阅读更多相关信息：Bootstrap Nesting columns

试图让列并排坐在CSS Bootstrap中

1 个答案: