时间戳

首页 > 解决方案 > 粘性在引导列中不起作用

css - 粘性在引导列中不起作用

问题描述

当用户滚动浏览其旁边的内容时，我试图使我的表单具有粘性。

这种方法我用过很多次，过去一直有效。这让我发疯了，有人知道为什么我的表格在这种情况下没有粘住吗？

.sticky-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1020;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />


<div class="container">
  <div class="row justify-content-around">
    <div class="col-5">
      <!-- sticky -->
      <div class="sticky-top">
        <div class="card card__body box-shadow" style="background-color:green;">
          <div class="row">
            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 ">
              <div class="form-group service-form-group">
                <label class="control-label sr-only" for="name"></label>
                <input id="name" type="text" placeholder="First Name" class="form-control" required>
                <div class="form-icon"><i class="fa fa-user"></i></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-5 col-12">
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
    </div>
  </div>
</div>

标签： cssbootstrap-4

解决方案

我删除了一些column类并row在占位符分组中添加了一个。这似乎解决了您的表格不粘的问题。

尝试以下操作：

.sticky-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1020;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />


<div class="container">
  <div class="row justify-content-around">
    <div>
      <!-- sticky -->
      <div class="sticky-top">
        <div class="card card__body box-shadow" style="background-color:green;">
          <div class="row">
            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 ">
              <div class="form-group service-form-group">
                <label class="control-label sr-only" for="name"></label>
                <input id="name" type="text" placeholder="First Name" class="form-control" required>
                <div class="form-icon"><i class="fa fa-user"></i></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div>
        <h2>Placeholder</h2>
        <h2>Placeholder</h2>
        <h2>Placeholder</h2>
        <h2>Placeholder</h2>
        <h2>Placeholder</h2>
        <h2>Placeholder</h2>
        <h2>Placeholder</h2>
        <h2>Placeholder</h2>
        <h2>Placeholder</h2>
        <h2>Placeholder</h2>
        <h2>Placeholder</h2>
        <h2>Placeholder</h2>
      </div>
    </div>
  </div>
</div>

让我知道这是否是您正在寻找的。

推荐阅读