Bootstrap col固定位置[重复]

Question

如何修复 Bootstrap col.

我试过这样但它不起作用：

<div class="row">
    <div class="col-md-6">Content goes here...</div> 
    <div class="col-md-6" style=" position: fixed">Content goes here...</div> 
</div>

fixed position 使 col 成为绝对位置。

当页面从顶部 400px 向下滚动时，如何禁用固定位置。

Answer 1

使用媒体查询仅应用特定屏幕宽度上方的固定位置。例如 768px 是 Bootstrap 4 md 断点：

CSS（min-height 是可选的）：

@media (min-width: 768px) {
    .fixed-posi {
        width: 50%;
        margin-left: 50%;
        min-height:100%;
        position:fixed;
    }
}

然后，在这样的布局中使用fixed-posi...

   <div class="row">
        <div class="col-md-6">
           Content goes here...
        </div>
        <div class="col-md-6 fixed-posi">Content goes here... (fixed position)
        </div>
   </div>

演示：https://www.codeply.com/go/751CygARyO

类似问题（左侧固定 DIV）：How to left column fixed and right scrollable in Bootstrap 4, responsive?