如何使 bootstrap 表现得像带有粘性 header 的 table？

Question

这是我的 bootstrap，我需要表现得像 table。我还需要 header 列在滚动时表现得像粘性 header。这可能只需要 bootstrap 吗？

我没有使用实际 table 的原因是因为这将进入正式 object 并且正式与 tables

有问题

<div class="container">
<div class="row visible-md visible-lg">
    <div class="form-group col-md-2">
        <label>First Name</label>
    </div>
    <div class="form-group col-md-2">
        <label>Last Name</label>
    </div>
    <div class="form-group col-md-2">
        <label>Address</label>
    </div>
    <div class="form-group col-md-2">
        <label>City</label>
    </div>
    <div class="form-group col-md-2">
        <label>State</label>
    </div>
    <div class="form-group col-md-2">
        <label>Zip Code</label>
    </div>
</div>
<div class="row">
    <div class="form-group col-md-2">
        <label class="visible-xs visible-sm">First Name</label>
        Jake
    </div>
    <div class="form-group col-md-2">
        <label class="visible-xs visible-sm">Last Name</label>
        Elwood
    </div>
    <div class="form-group col-md-2">
        <label class="visible-xs visible-sm">Address</label>
        1060 W Addison St
    </div>
    <div class="form-group col-md-2">
        <label class="visible-xs visible-sm">City</label>
        Chicago
    </div>
    <div class="form-group col-md-2">
        <label class="visible-xs visible-sm">State</label>
        IL
    </div>
    <div class="form-group col-md-2">
        <label class="visible-xs visible-sm">Zip Code</label>
        60613
    </div>
</div>
<div class="row">
    <div class="form-group col-md-2">
        <label class="visible-xs visible-sm">First Name</label>
        John
    </div>
    <div class="form-group col-md-2">
        <label class="visible-xs visible-sm">Last Name</label>
        Wayne
    </div>
    <div class="form-group col-md-2">
        <label class="visible-xs visible-sm">Address</label>
        18601 Airport Way
    </div>
    <div class="form-group col-md-2">
        <label class="visible-xs visible-sm">City</label>
        Santa Ana
    </div>
    <div class="form-group col-md-2">
        <label class="visible-xs visible-sm">State</label>
        CA
    </div>
    <div class="form-group col-md-2">
        <label class="visible-xs visible-sm">Zip Code</label>
        92707
    </div>
</div>
</div>

https://stackblitz.com/edit/angular-eyo4a8-gnrknm?file=app%2Fdatepicker-date-class-example.html

Answer 1

我发现它只是需要使用

 class="sticky-top"

Answer 2

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

这个粘性 class 在到达其滚动位置时使用 JS 添加到导航栏。将此粘性代码用于您需要添加的 header 列。

如何使 bootstrap 表现得像带有粘性 header 的 table？

How to make bootstrap behave like a table with a sticky header?

html

css

twitter-bootstrap

angular-formly

ngx-formly