如何在网格中的 bootstrap 4 中使用粘顶 class

Question

我尝试在网格中使用 sticky-top class 但它不起作用

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

<div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 sticky-top"> <!-- this grid should be sticky -->
          <div class="card text-left">
            <div class="card-body">
              <h4 class="card-title">Title</h4>
              <p class="card-text">Body</p>
            </div>
          </div>
        </div>
        <div class="col-sm-6" style="min-height:800px;">ssdfjosdfjsl</div>
        <div class="col-sm-3">ssdfjosdfjsl</div>
      </div>
    </div>

帮我解决这个问题谢谢

Answer 1

在您的 CSS 中添加：

.sticky-top{
    position: fixed;
    width: 100%;
    top: 0;
    border: 1px solid #000;
}

希望对您有所帮助。

Answer 2

添加 align-items-start 以禁用使所有列高度相等的拉伸默认对齐方式，因此没有空间出现粘性行为

.container-fluid {
  border:1px solid;
}
.sticky-top {
  border:1px solid red;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid">
  <div class="row align-items-start">
    <div class="col-sm-3 sticky-top"> <!-- this grid should be sticky -->
      <div class="card text-left">
        <div class="card-body">
          <h4 class="card-title">Title</h4>
          <p class="card-text">Body</p>
        </div>
      </div>
    </div>
    <div class="col-sm-6" style="min-height:800px;">ssdfjosdfjsl</div>
    <div class="col-sm-3">ssdfjosdfjsl</div>
  </div>
</div>

当我们保持默认对齐时，您可以通过边框清楚地看到问题：

.container-fluid {
  border:1px solid;
}
.sticky-top {
  border:1px solid red;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 sticky-top"> <!-- this grid should be sticky -->
      <div class="card text-left">
        <div class="card-body">
          <h4 class="card-title">Title</h4>
          <p class="card-text">Body</p>
        </div>
      </div>
    </div>
    <div class="col-sm-6" style="min-height:800px;">ssdfjosdfjsl</div>
    <div class="col-sm-3">ssdfjosdfjsl</div>
  </div>
</div>

你也可以保持默认对齐方式，让卡片有粘性

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3"> 
      <div class="card text-left sticky-top">
        <div class="card-body">
          <h4 class="card-title">Title</h4>
          <p class="card-text">Body</p>
        </div>
      </div>
    </div>
    <div class="col-sm-6" style="min-height:800px;">ssdfjosdfjsl</div>
    <div class="col-sm-3">ssdfjosdfjsl</div>
  </div>
</div>

如何在网格中的 bootstrap 4 中使用粘顶 class

how to use sticky-top class in bootstrap 4 in grid

css

sticky

bootstrap-4