Bootstrap 4粘顶无法正常工作[重复]

Question

我需要让侧边栏贴在顶部。这在屏幕小于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;
    }
  }
}

Answer 1

#sidebar 与内容一样高，因此侧边栏没有空间可以修复...所以将.align-self-start 添加到您的#sidebar

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

另见：https://getbootstrap.com/docs/4.3/utilities/flex/