jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了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

大佬总结

以上是大佬教程为你收集整理的jquery – 引导符不保留列布局全部内容,希望文章能够帮你解决jquery – 引导符不保留列布局所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。