css - 如何在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

最简单方法是使用 Bootstrap sticky-top 类。

<div class="container" style="position:relative; margin-top:100px">
    <div class="row">
        <div class="col-lg-3 d-none d-md-block">
            <ul class="list-group shadow bg-white rounded sticky-top">
                ..
            </ul>
            <hr class="d-sm-none">
        </div>
        <div class="col-md-6">
            <div class="card shadow bg-white rounded">
                //
            </div>
            <hr class="d-sm-none">
        </div>
        <div class="col-md-3 d-none d-md-block">
            <ul class="list-group shadow bg-white rounded sticky-top">
                ..
            </ul>
            <hr class="d-sm-none">
        </div>
    </div>
</div>

https://codeply.com/p/AUtPqy2GY2

编辑

如果粘性元素上方有其他内容(例如导航栏或标题)，请相应地覆盖 sticky-top 类的 top 以偏移高度...

.sticky-top {
    top: 100px; /* height of header */
}