0

这是我的引导程序，我需要表现得像一张桌子。我还需要标题列在滚动时表现得像一个粘性标题。仅使用引导程序就可以做到这一点吗？

我不使用实际表格的原因是因为这将进入一个正式的对象并且表格有问题

<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

4

2 回答 2

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

当它到达滚动位置时，这个粘性类被添加到带有 JS 的导航栏。将此粘性代码用于添加所需的标题列。

于 2020-06-26T03:45:20.353 回答
0

我发现它只需要使用

 class="sticky-top"
于 2020-06-26T02:46:08.557 回答