在 Bootstrap 4 中使最右边的列固定位置

Question

我正在尝试使用position: fixed.

这是一个演示，它的代码。

当我滚动文档时，我希望右侧的按钮组粘在视口上。我试过添加position: fixed; 这不能按预期工作 - 它会导致按钮组像这样覆盖在窗口顶部。

我已经看到了关于在 Bootstrap 中固定列的这个答案，但是当列的位置互换时，解决方案将不起作用。那里的解决方案很少会导致右列在小屏幕中覆盖在左列的顶部，这是不可取的。在这种情况下，在小屏幕上查看时，我希望列堆叠（禁用粘性功能）。

我更喜欢 CSS 解决方案，但如果可能的话，我也想知道它是如何在 JS 中完成的。

Answer 1

Bootstrap 4 有这样的position-fixed课程......

<div class="container">
    <div class="row">
        <div class="col-md-9">
            ..
        </div>
        <div class="col-md-3" align="center">
            <div class="position-fixed">
                <button class="btn btn-success btn-custom">
                    <span>Button 1</span>
                </button>
                <br>
                <button class="btn btn-warning btn-custom">
                    <span>Button 2</span>
                </button>
                <button class="btn btn-danger btn-custom">
                    <span>Button 3</span>
                </button>
            </div>
        </div>
    </div>
</div>

https://codeply.com/go/exOfOB2Igy