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

Question

我正在为网站主页使用 Bootstrap 4。我使用了 3 个网格，col-md-3、col-md-6、col-md-3。我希望第一个和最后一个网格粘在 Position 上，中间可以滚动。

            <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 */
}