Bootstrap v5 中固定列的问题答案

【问题标题】：Issues with fixed column in Bootstrap v5Bootstrap v5 中固定列的问题
【发布时间】：2021-07-04 14:31:04
【问题描述】：

我正在使用 Bootstrap v5 并希望获得一个网格布局，其中一列具有 position:fixed 以便它滚动到左边很长的列。

问题如下：

当第一行的高度变得太大以至于第二行（位置：固定列）移出视口时，列（“一些示例内容”）也会消失。对于较小的高度，它可以按预期工作。

示例代码为：

<div class="container">
    <div class="row mt-5">
    <div class="col-md-8" style="min-height:200px; border: 1px solid red">
    </div>
    <div class="col-md-4">
        Box1
    </div>
    </div>    
    <div class="row mt-3">
    <div class="col-md-8" style="min-height:4000px; border: 1px solid red">
    </div>
    <div class="col-md-4">
    <div style="position:fixed">
    Some sample content
    </div>
    </div>
    </div>
            <div class="row">
    <div class="col-md-8" style="min-height:500px; border: 1px solid red">
    </div>
    <div class="col-md-4">
        Box End
    </div>
    </div>

您可以在以下位置找到示例：https://jsfiddle.net/4cma32k9/1/

你有什么解决办法吗？

最好，汤姆

【问题讨论】：

标签： css css-position bootstrap-5

【解决方案1】：

使用粘性位置：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" >
<div class="container">
  <div class="row mt-5">
    <div class="col-md-8" style="min-height:200px; border: 1px solid red">
    </div>
    <div class="col-md-4">
      Box1
    </div>
  </div>
  <div class="row mt-3">
    <div class="col-md-8" style="min-height:4000px; border: 1px solid red">
    </div>
    <div class="col-md-4">
      <div class="sticky-top">
        Some sample content
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-8" style="min-height:500px; border: 1px solid red">
    </div>
    <div class="col-md-4">
      Box End
    </div>
  </div>
</div>

【讨论】：

酷，谢谢！这似乎有效！你能解释一下为什么这种方法有效而另一种方法无效吗？
@tomseidel1 position:fixed 考虑屏幕以实现其滚动行为，因此很难根据内容使其工作。 Position:sticky 是针对这种行为引入的。一些相关的问题来了解sticky：stackoverflow.com/q/55965662/8620333/stackoverflow.com/q/54609208/8620333

【解决方案2】：

当我尝试修复 JSFiddle 中的问题时，我只是添加了边框，我已经看到了你的

一些示例内容

无论你做什么，文本都是由视口定位的。在这一点上你的结果是你想要的大屏幕吗？

    <div class="col-md-4" style="border:1px solid green;" >
      <div style="position:fixed; border:1px solid gold;">
            Some sample content
       </div>
    </div>

position:fixed 相似度 position:absolute 绝对值和固定值将定义的元素从正常流程中取出。取决于相对定位的父元素。

可能会出现一些引导问题。尝试在没有引导代码的情况下弄清楚。给两个或多个 div 并设置它的样式。然后尝试塑造它并达到你想要的，如果它不起作用，我会在有空的时候写并尝试。

请确保您尝试所有选项并给我反馈。

【讨论】：

嗨！您自己在 JSfiddle 中尝试过吗？这不会产生预期的结果，因为这会将元素固定在中间行的右上角。但是，我希望元素滚动。

【解决方案3】：

<div>
    <div style="position:fixed; z-index:9999;">
        do something ....
    </div>
</div>

所以无论这个 div 中有什么内容，它的位置总是在其他内容的前面。如果您希望此 div 中的内容位于另一个 div 的内容之后，则可以使用z-index:-9999

【讨论】：