如何在网格的Bootstrap 4中使用Sticky-top类

2024-05-03 • 问答

我试图在网格中使用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>

请帮助我解决此问题

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

在您的CSS中添加以下内容：

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

希望这会对您有所帮助。

如何在网格的Bootstrap 4中使用Sticky-top类

yangwei521 回答：如何在网格的Bootstrap 4中使用Sticky-top类

大家都在问