如何在网格中的引导程序 4 中使用粘顶类答案

【问题标题】：how to use sticky-top class in bootstrap 4 in grid如何在网格中的引导程序 4 中使用粘顶类
【发布时间】：2019-11-16 07:30:07
【问题描述】：

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

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

帮我解决这个问题，谢谢

【问题讨论】：

标签： css bootstrap-4 sticky

【解决方案1】：

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

【讨论】：

【解决方案2】：

在你的 CSS 中添加：

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

希望这会对你有所帮助。

【讨论】：