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/

Bootstrap 4 sticky-top工作不正常

1 个答案: