html - Bootstrap 4粘性顶部无法正常工作

This question already has answers here:

My position: sticky element isn't sticky when using flexbox
                                
                                    （3个答案）
                                
                        
                                2年前关闭。
            
                    
我需要使侧边栏固定在顶部。当屏幕小于sm断点但大于屏幕断点时，此方法将起作用。我以为罪魁祸首可能是类名的顺序，所以我尝试移动它们但结果相同。

sticky-top适用于col-sm-*，但不适用于col-*。为什么？

我的代码在HAML和SCSS中，我希望可以。 Refer to this pen

.container
  %ul.nav
    %li.nav-item
      %a.nav-link{:href => "#"}
        Menu
    %li.nav-item
      %a.nav-link{:href => "#"}
        Active
    %li.nav-item
      %a.nav-link{:href => "#"}
        Link
  .row
    .col-sm-3.sticky-top#sidebar
      This sidebar should stick to the top, both in expanded view and stacked view.
    .col-sm-9#main
      This main will continue scrolling until the bottom while the sidebar will stick to the top.
      This main will continue scrolling until the bottom while the sidebar will stick to the top.
      This main will continue scrolling until the bottom while the sidebar will stick to the top.
      This main will continue scrolling until the bottom while the sidebar will stick to the top.

的CSS

html, body {
  margin: 0;
  height: 100%;
}

.container {
  height: 120%;
  box-shadow: 2px 2px 10px;

  .row {
    > #sidebar {
      background:#ccc;
    }
    > #main {
      background: #eee;
    }
  }
}

最佳答案

#sidebar与内容一样高，因此边栏没有空间可修复...因此在.align-self-start中添加#sidebar

https://codepen.io/anon/pen/PQbLPR

另请参阅：https://getbootstrap.com/docs/4.3/utilities/flex/

关于html - Bootstrap 4粘性顶部无法正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48678819/