[英]How to make bootstrap behave like a table with a sticky header?
这是我的引导程序,我需要表现得像一张桌子。 我还需要 header 列在滚动时表现得像一个粘性 header 。 仅使用引导程序就可以做到这一点吗?
我不使用实际表格的原因是因为这会将 go 转换为正式的 object 并且表格有问题
<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
我发现它只需要使用
class="sticky-top"
.sticky {
position: fixed;
top: 0;
width: 100%;
}
这个粘性的 class 在到达它的滚动 position 时会通过 JS 添加到导航栏。 将此粘性代码用于您需要添加的header 列。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.