javascript - 在Bootstrap 4中将最右边的列固定到位

我正在尝试使用position: fixed修复Bootstrap 4网格系统中的右列。

这是demo和it's code。

滚动文档时，我希望右侧的按钮组粘贴到视口(viewport)。我尝试添加position: fixed;这无法按预期工作-导致按钮组像this一样覆盖在窗口顶部。

我已经在 bootstrap 中固定列上看到了this answer，但是当列的位置互换时，解决方案将不起作用。在少数解决方案中，很少有解决方案会导致右列重叠在小屏幕的左列顶部。在这种情况下，在小屏幕上查看时，我希望将列堆叠(禁用粘性功能)。

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

最佳答案

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

关于javascript - 在Bootstrap 4中将最右边的列固定到位，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52351290/