如何使用CSS位置粘贴来使用Bootstrap 4保持侧边栏可见

Question

我有两列布局,如下所示:

 <div class="row">
    <div class="col-xs-8 content"> 
    </div>
    <div class="col-xs-4">
    </div>
 </div>

如果我设置position:sticky到侧边栏列,我会得到侧边栏的粘性行为:https://codepen.io/marcanuy/pen/YWYZEp

CSS:

.sticky {
  position: sticky;
  top: 10px;
}

HTML:

 <div class="row">
    <div class="col-xs-8 content"> 
    </div>
    <div class="col-xs-4 sticky">
    </div>
 </div>

但是当我将sticky属性设置为仅位于侧边栏中的菜单时,相关文章部分正常滚动并获得菜单div的粘滞行为,它不起作用:

 <div class="row">
    <div class="col-xs-8 content"> 
    </div>
    <div class="col-xs-4">
       <div class="menu sticky">
       </div>
    </div>
 </div>

这是第一个使用粘性行为滚动整个侧边栏的示例的截屏视图,然后将sticky属性更改为不起作用的菜单:

Bootstrap 4 推荐使用sticky属性作为对Affix jQuery插件的删除支持:

删掉了Affix jQuery插件.我们建议使用位置:粘性polyfill.

我测试过:

• Firefox 47.0 css.sticky.enabled=“true”以下about:config

• Chrome 50.0.2661.94(64位)已experimental Web Platform features启用chrome://flags

(这不是如何在Bootstrap中制作粘性侧边栏的重复？因为那个使用BS附加内容)

Answer 1

在稳定的Bootstrap 4.0.0版本中,这是使用sticky-top类完成的...

演示

<div class="container">
    <nav class="navbar navbar-light bg-light navbar-expand">
        <a class="navbar-brand" href="#">Header</a>
        ...
    </nav>
    <div class="row">
        <div class="col-8 content">
            Content
        </div>
        <div class="col-4">
            <div class="sticky-top">
                <h4>Sticky menu</h4>
                ...
            </div>
        </div>
    </div>
    <div class="footer">
        ...
    </div>
</div>

这甚至在标题/导航栏的高度,内容和页脚是动态/未知的.

https://www.codeply.com/go/QJogUAHIyg

Answer 2

我解决了启用flexbox.在Bootstrap的Github存储库中引发问题后,我得到了Bootstrap 成员的回答:

.col-xs-4没有.col-xs-8那么高,所以当粘性开始时,菜单基本上没有空间可以"浮动".让.col-xs-4更高,事情很好:https: //codepen.io/anon/pen/OXzoNJ如果你启用我们的网格系统的Flexbox版本(通过$ enable-flex:true;),你会得到免费的自动等高列,它来了在你的情况下派上用场.