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>

我不同意这不是一个理想的解决方案，但它现在可以胜任。

Bootstrap 3奇怪的专栏问题

2 个答案: