如何使用CSS位置粘性使Bootstrap 4保持侧边栏可见 [英] How to use CSS position sticky to keep a sidebar visible with Bootstrap 4

问题描述

我有两列这样的布局:

 <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

If I set the position:sticky to the sidebar column, I get the sticky behaviour of the sidebar: 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属性 only 设置为位于边栏中的菜单时，则会滚动相关文章部分正常，并且通过菜单div 出现 sticky 行为，则不起作用:

But when I set the sticky property only to the menu that is located in the sidebar, so the related articles section scrolls normally and gets the sticky behaviour with the menu div, it doesn't work:

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

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

This is the screencast of the first example scrolling the whole sidebar with a sticky behaviour, and then changing the sticky property to the menu that doesn't work:

Bootstrap 4 推荐 sticky 属性作为放弃了对Affix jQuery插件的支持:

Bootstrap 4 recommends the sticky property as the dropped support for the Affix jQuery plugin:

删除了Affix jQuery插件.我们建议使用一个位置:粘性的polyfill.

Dropped the Affix jQuery plugin. We recommend using a position: sticky polyfill instead.

我已经在以下位置对其进行了测试:

I have tested it in:

• 在about:config

在chrome://flags

(这不是如何在Bootstrap中制作粘性侧边栏的副本吗?，因为那是使用BS词缀的)

(This is not a duplicate of How to make a sticky sidebar in Bootstrap? because that one is using BS affix)

推荐答案

我解决了启用flexbox的问题.在Bootstrap的 Github 存储库中提出问题后，Bootstrap给出了答案成员:

I solved enabling flexbox. After raising an issue in Bootstrap's Github repository I got an answer by a Bootstrap member:

.col-xs-4不如.col-xs-8高，因此基本上没有 当粘滞现象发生时，菜单可在其中浮动"的空间. 使.col-xs-4更高，然后一切正常: https://codepen.io/anon/pen/OXzoNJ 如果启用了Flexbox版本 我们的网格系统(通过$ enable-flex:true;)，您会自动 等高列是免费的，在您的情况下会派上用场.

The .col-xs-4 isn't as tall as the .col-xs-8, so there's basically no space for the Menu to "float" within when the stickiness kicks in. Make the .col-xs-4 taller and things work fine: https://codepen.io/anon/pen/OXzoNJ If you enable the Flexbox version of our grid system (via $enable-flex: true;), you get automatic equal-height columns for free, which comes in handy in your case.

这篇关于如何使用CSS位置粘性使Bootstrap 4保持侧边栏可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！