引导词缀不保持列布局答案

【问题标题】：Bootstrap affix not keeping the column layout引导词缀不保持列布局
【发布时间】：2014-09-28 11:39:52
【问题描述】：

当我在浏览器 (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 fiddle 的链接，这样你就可以实时看到问题的发生：

这里有一个 JS fiddle 供你查看错误：

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

我该如何解决这个问题？

【问题讨论】：

您已经在您的 JSFiddle 上缩小了 JS 和 CSS，这似乎包括实际的 Bootstrap 库文件和您自己的脚本/标记。你能把它们分开，只在小提琴上包含你自己的脚本/标记吗？您可以使用页面左侧的“外部资源”部分加载引导文件
@LloydBanks 没有意识到我可以在 JSFiddle 中做到这一点。已修复，谢谢指点！

标签： jquery css twitter-bootstrap affix

【解决方案1】：

这里有一些东西可以帮助您入门：http://jsfiddle.net/panchroma/H2KU7/

它仍然需要细化，但重要的部分已经完成。关键是当您使用 affix 时，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 -->

编辑
要针对左侧列在粘贴时的行为优化您的 CSS，请使用类似

的内容定位左侧列

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

希望这会有所帮助！

【讨论】：

【解决方案2】：

这里发生了几件事。第一个问题是您试图结合使用 Bootstrap 的脚手架及其附加功能。您会注意到，在较小的屏幕上，词缀功能仍然处于活动状态，当您向下滚动屏幕时，它会覆盖在结果部分的顶部。

您可以通过在 #myAffix 元素之外添加一个容器 DIV 来解决此问题，然后将 position: relative !important; 与设置为 1200 像素的媒体查询结合使用以禁用小屏幕宽度设备的词缀功能。

发生的第二件事是您的附加元素的固定位置不在位置。拿出来

#myAffix{
    left: 0px;
}

并添加

.affix{
    top: 0px !important;
}

现在您将在左侧有一个固定的导航栏，可以与页面的其余部分无缝协作。

要一起查看所有内容，请查看updated fiddle example

【讨论】：

太棒了，这实际上解决了我的问题并且工作完美。感谢您指出@media 查询，我从来没有想过。

【解决方案3】：

设置两个几乎相同的导航栏。其中一个有 class= "navbar navbar-fixed-top" ， id="nav_first" 和 style="visibility:hidden;" . 第二个有 class="navbar" 和 id="nav_second"。除了这些不同，这些导航栏完全一样。

另外，将此js代码添加到页面中：

$(document).ready(function(){
        console.log("document is ready");
       
        $(document).scroll(function(){
            console.log("hoook");
            var dist = elementOffset = $('#nav_second').offset().top  - $(window).scrollTop();
            console.log("dist: "+dist);
            if(dist<=0){
                $("#nav_first").css("visibility","visible");
            }
            else{
                
                $("#nav_first").css("visibility","hidden");
            }
        });
        
    });

【讨论】：