Question

我正在尝试使div col-md-3内的粘滞div，如果我不使用col-md-3类，它可以正常工作，请告诉我我做错了什么，

.sticky {
  position: sticky;
  top: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class=" col-3">
    <div class="sticky" style="border:1px solid; color:red">sticky</div>
  </div>
  <div class="col-9" style="height:1000px; border:1px solid; background:red">
  </div>
</div>

Answer 1

由于父div（.col-3）产生了粘滞位置，因为它具有display flex属性，其高度等于div（col-9）。

简而言之：

<div style="display: flex;">
  <div class="1"></div>
  <div class="2" style="height="500px;"></div>
</div>

现在在上述HTML中，div类1也获得了height = div类2（500像素）。

div类1中的任何元素（位置：粘性）对于下一个500px都是粘性的。

如果任何元素是粘性的，那么它也具有相同的定义父级高度。

为什么位置黏性不适用于bootstrap 4

1 个答案: