如何使左右网格变粘，中间一个在Bootstrap 4中可滚动

Question

我正在将Bootstrap 4用于网站主页。我已经使用了3个网格，col-md-3，col-md-6，col-md-3。我希望第一个和最后一个网格在“位置”上保持粘性，而中间的网格可滚动。

            <div class="col-lg-3 d-none d-md-block">
               //want sticky on fixed left position
            </div>
            <div class="col-lg-6">
               //all contents in middle scrollable
            </div>
            <div class="col-lg-3 d-none d-md-block">
              //want sticky on fixed right position
            </div>

Check code here

Answer 1

在中间部分添加滚动，而不是将fixed放置到2个元素上，因为这会产生问题并在响应中产生额外的覆盖样式。

更新的HTML

<div class="col-lg-6">
      <div class="fixed">
         //all contents in middle scrollable
      </div>
    </div>
CSS

 .fixed {
        height: calc(100vh - 130px);// 130px is the extra space set it accordingly if you didn't find aligned divs
        overflow: scroll;
    }

Answer 2

在列表组中添加一个自定义类，例如myStickyListGroup。

Answer 3

https://codepen.io/NethraDayalan/pen/zYYbJPz?editors=1100 check output

Answer 4

最简单