jquery – 引导符不保留列布局

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

这只有当我将affix属性应用到我的边栏div时才会发生.

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

但是,当我向下滚动时,这就是它的样子：

为了您的参考,这是我如何实现affix 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/

如何解决这个问题？

解决方法

你在这里有几件事情.第一个问题是您正在尝试使用Bootstrap的脚手架及其贴纸功能.您会注意到,在较小的屏幕上,固定功能仍然有效,当您向下滚动屏幕时,它会覆盖在结果部分的顶部.

您可以通过在#myAffix元素之外添加容器DIV,然后使用position：relative！important;结合设置在1200像素的媒体查询,以禁用具有小屏幕宽度的设备的贴图功能.

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

#myAffix{
    left: 0px;
}

并添加

.affix{
    top: 0px !important;
}

现在,您将在左侧安装一个固定的导航栏,与页面的其余部分无缝工作.

要一起看看,看看updated fiddle example

原文地址：https://www.jb51.cc/jquery/179937.html