Bootstrap词缀不保持列布局

Question

当我在浏览器中向下滚动(chrome)时,右列被一直推到左边,我的侧边栏被推到背景,并且所有右侧内容都在左侧边栏上.

这只有在我将附加属性应用到侧边栏div时才会发生.

如果您注意到,在正常情况下,页面呈现没有问题,如下所示:

但是,当我向下滚动时,它的样子如下:

供您参考,这就是我实现词缀div的方式:

<div class="row content-wrapper">
    <div data-spy="affix" data-offset-top="200" data-offset-bottom="200" id="myAffix">
        <div class="col-lg-3">
            <!-- Sidebar code -->
        </div>
    </div>
    <div class="col-lg-9">
            <!-- content -->
    </div>
</div>

这是JS小提琴的链接,以便您可以看到实时发生的问题:

这是一个JS小提琴,你可以看到错误:

http://jsfiddle.net/fH46S/2/

我怎样才能解决这个问题？

Answer 1

这是让你入门的东西:http://jsfiddle.net/panchroma/H2KU7/

它仍然需要refinememt但重要的是完成了.关键是当你使用词缀时,Bootstrap JS将.affix类应用于你在设定的滚动量后监视的div.这个词缀类有css

position:fixed;

这是阻止div滚动的原因.它也会使div脱离正常流量,这就是你得到重叠的原因.

我的解决方案是在左侧边栏上包裹一个新div,然后对其应用词缀行为.您的原始代码正在<div class="col-lg-3">脱离正常流程,这就是问题的根源.

HTML

 <div class="col-lg-3">
    <div class="wrap" data-spy="affix" data-offset-top="200" data-offset-bottom="200" id="myAffix">
       <!-- your nav div here -->
    </div> <!-- close wrap -->
  </div> <!-- close col-lg-3 -->    

编辑
在左侧列固定时对左侧列的行为进行优化,以左侧列为目标

.col-lg-3 .wrap.affix{
 /* custom afix padding and styling here */
}

希望这可以帮助!

Answer 2

你有几件事在这里发生.第一个问题是你试图将Bootstrap的脚手架与其词缀功能结合使用.您会注意到,在较小的屏幕上,词缀功能仍处于活动状态,当您向下滚动屏幕时,它会叠加在结果部分的顶部.

您可以通过在#myAffix元素外部添加容器DIV ,然后position: relative !important;与设置为1200px的媒体查询结合使用来为屏幕宽度较小的设备禁用附加功能来解决此问题.

发生的第二件事是你的固定元素的固定位置是不合适的.取出

#myAffix{
    left: 0px;
} 

并添加

.affix{
    top: 0px !important;
}

现在,左侧有一个固定的导航栏,可以与页面的其余部分无缝连接.

要一起查看,请查看更新的小提琴示例