Bootstrap 3奇异列问题

Question

我一直在使用bootstrap为我的博客创建一个博客主题，一切似乎都进行得很顺利。这是一个两列布局，主列设置为sm-8，侧栏列设置为sm-4，因此它们都对齐。

我的问题是，主页上的所有东西看起来都很棒，但如果我点击一个帖子来单独查看，侧栏栏就会从行中分离出来，并漂浮在页面的底部。我以前从来没有遇到过这个问题，所以我想知道你们中是否有人遇到过这个问题。

    <div class='container-fluid'>
  <div class='row'>
    <div class='col-sm-8'>
      <b:section class='main' id='main' name='Main' showaddelement='no'>
        <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
        </b:widget>
      </b:section>
    </div>
    <div class='col-sm-4'>
      <b:section class='' id='sidebar' maxwidgets='20' name='Sidebar' showaddelement='yes'>
        <b:widget id='FeaturedPost1' locked='false' title='Featured post' type='FeaturedPost'>
        </b:widget>
        <b:widget id='CustomSearch1' locked='false' title='Search:' type='CustomSearch'>
        </b:widget>
        <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
        </b:widget>
      </b:section>
    </div>
    <!--end col-->
  </div>
  <!--end of row-->

</div>
<!--end of main container-->

这是我在http://mytestblogfortheme.blogspot.co.uk/上开发的测试站点的链接

如果你点击帖子标题，你就会明白我的意思。

Answer 1

在第一页很简单，你的模板保持在同一行，两个col-8 and th col-4 <div> (你可以用浏览器的html代码检查器检查，像firebugs一样)

在第二页中(通过点击文章标题)，您的模板只在行中保留col-8 <div>，因此col-4 div被移到行div的底部

您可以将第二个页面模板的col-4列移动到行内

Answer 2

找到了一个解决方案，在查看单个帖子时，使用表格将两列放在一起：

  <div class='row'>
<table><tr><td>
<div class='col-sm-8'>
  <b:section class='main' id='main' name='Main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
    </b:widget>
  </b:section>
</div>
<div class='col-sm-4'>
  <b:section class='' id='sidebar' maxwidgets='20' name='Sidebar' showaddelement='yes'>
    <b:widget id='FeaturedPost1' locked='false' title='Featured post' type='FeaturedPost'>
    </b:widget>
    <b:widget id='CustomSearch1' locked='false' title='Search:' type='CustomSearch'>
    </b:widget>
    <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
    </b:widget>
  </b:section>
</div>
<!--end col-->
</td></tr></table>

我同意这不是一个理想的解决方案，但目前它可以做好这项工作。