Bootstrap v5 中固定列的问题

Question

我正在使用 Bootstrap v5 并且想要一个网格布局，其中一列有 position:fixed 以便它滚动时留下很长的一列。

问题如下：

每当第一行的高度变得太大以至于第二行（带有 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/

你有什么解决办法吗？

最好的，汤姆

Answer 1

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

Some sample Content

无论您做什么，文本都由视口定位。至此你的结果就是你想要的大屏？

    <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 similarty position:absolute both abolute and fixed take the defined element out of the normal flow. Depends on the relatively positioned parent element.

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

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

Answer 2

使用置顶位置：

<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>

Answer 3

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

所以无论这个div里面有什么内容，它的位置总是在其他内容的前面。如果你想让这个div中的内容在另一个div的内容之后，那么你可以使用z-index:-9999

Bootstrap v5 中固定列的问题

Issues with fixed column in Bootstrap v5

css

css-position

bootstrap-5