Question

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

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

我已经看到this answer可以在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://www.codeply.com/go/exOfOB2Igy

Answer 2

将按钮放在另一个div内，然后向该div添加position: fixed样式，如下所示：

<div class="col-md-3" align="center" style="margin-bottom: 40px;/* position: fixed; */">
  <div style="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>

您可以将样式设为css类，并使其仅在大屏幕上显示

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

2 个答案: