我有基于百里香的春季靴子项目的网页，其中包含不同的卡片。这是我的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Card</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h2>Cards Columns</h2>
<div class="body-content" id="mainBody">
<div class="row">
<div class="col-sm-3 mb-3 mb-md-0 fixed-bottom sticky-top" style="padding-left: 50px;padding-right: 20px;padding-top: 10px;padding-bottom: 50px;">
<div>
<!--calendar sample begins -->
<div class="card ">
<div class="card-header">
<div class="card-title">Welcome</div>
</div>
<div class="card-body">
<div th:with="todayDate=${#dates.createNow()}">
<div>Today's date is: <span th:text="${#dates.format(todayDate, 'MMMMM dd,yyyy')}"></span></div><br>
<div>Need help? Call 888.790.2246 or email <a th:href="'mailto: [email protected]'">[email protected]</a>.</div><br>
<div>Join us for an upcoming e-submission training webinar!</div>
<div>Click here to <a th:href="'https://iowalandrecords.ticketbud.com/fall2019webinars'">register</a>!</div>
</div>
</div>
</div>
<!--calendar sample ends -->
<div id="summary" style=" overflow: auto;">
<div class="card position-sticky">
<div class="card-header">
<div class="card-title">Document Summary</div>
</div>
<div class="card-body">
<table class="table table-striped table-hover ">
<tbody>
<tr>
<td class="col-xs-3">Group Name</td>
<td id="groupName" class="card-text" style="word-wrap:break-word"></td>
</tr>
<tr>
<td class="col-xs-3">Document Type</td>
<td id="docType"></td>
</tr>
<tr>
<td class="col-xs-3">Document Number</td>
<td id="docNumber"></td>
</tr>
<tr>
<td class="col-xs-3">Submission Date/Time</td>
<td id="subDate"></td>
</tr>
<tr>
<td class="col-xs-3">Status</td>
<td id="status"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-9" style="padding-left: 20px;padding-right: 100px;padding-top:10px;padding-bottom: 50px;">
<div class="row">
<div id="groupsListPanel" >
<div id="pendingGroupsListPanel" class="card">
<!--
Panel title to be shown here.
Shall have +/- icons so that the panel is expandable/collapsible correspondingly.
TODO: Non Priority: Currently, when the panel is collapsed, it will loose the custom panel height and when expanded it will default the panel height to show 5 rows max. Is current behavior ok or should it keep the custom panel height??? When the panel is resized and the collapse/expand icon is clicked, it is opening the panel to the full height and then resizing back to default height. Confirm if this behavior needs fixing!!!
-->
<div class="card-header">
<div class="card-title">
<span data-toggle="collapse" data-target="#pendingGroupsListBody" class="fa fa-minus"></span>
Pending Groups
</div>
</div>
<div class="marginBottom0">
<div class="alert alert-success col-sm-12" id="submitGroupSuccess" style="display: none">Group has been submitted successfully.</div>
<div class="alert alert-danger" id="submitGroupFailure" style="display: none">Oh snap!Change a few things up and try submitting again.</div>
</div>
<!--
Table heading is included in a separate div and table to that of its body to make the Table header fixed while the table body is being scrolled. Otherwise, if we keep it together inside the same div and table, the table header scrolls along with the table body because of the resizable and scrollable property of the panel body.
-->
<div class="paddingSides15 marginBottom0">
<table class="table marginBottom0">
<thead>
<tr>
<th style="padding-left: 15px;">GroupName</th>
<th style="padding-left: 30px;">Submission Date/Time</th>
<th>Organization</th>
<th>Submitted By</th>
<th>Group Action</th>
</tr>
</thead>
</table>
</div>
<!--
Table body shall be scrollable. Max 5 rows to be shown by default if there are 5 or more rows of data.
Need more work here in future.
TODO: Non Priority: If there are less than 5 rows, do we want to shrink the panel or keep it fixed with blank spaces???
-->
<div id="pendingGroupsListBody" class="card-body panel-collapse card-body-resizable card-body-fixed-height paddingTop0">
<table id="pendingGroupListTable" class="table table-striped table-hover">
<tbody>
<tr>
<td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
<td class="col-xs-2">08/14/2009 01:29PM</td>
<td class="col-xs-3">Ingeo Systems Inc.</td>
<td class="col-xs-3"></td>
<td class="col-xs-2">Submit Group</td>
</tr>
<tr>
<td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
<td class="col-xs-2">08/14/2009 01:29PM</td>
<td class="col-xs-3">Ingeo Systems Inc.</td>
<td class="col-xs-3"></td>
<td class="col-xs-2">Submit Group</td>
</tr>
<tr>
<td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
<td class="col-xs-2">08/14/2009 01:29PM</td>
<td class="col-xs-3">Ingeo Systems Inc.</td>
<td class="col-xs-3"></td>
<td class="col-xs-2">Submit Group</td>
</tr>
<tr>
<td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
<td class="col-xs-2">08/14/2009 01:29PM</td>
<td class="col-xs-3">Ingeo Systems Inc.</td>
<td class="col-xs-3"></td>
<td class="col-xs-2">Submit Group</td>
</tr>
<tr>
<td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
<td class="col-xs-2">08/14/2009 01:29PM</td>
<td class="col-xs-3">Ingeo Systems Inc.</td>
<td class="col-xs-3"></td>
<td class="col-xs-2">Submit Group</td>
</tr>
<tr>
<td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
<td class="col-xs-2">08/14/2009 01:29PM</td>
<td class="col-xs-3">Ingeo Systems Inc.</td>
<td class="col-xs-3"></td>
<td class="col-xs-2">Submit Group</td>
</tr>
<tr>
<td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
<td class="col-xs-2">08/14/2009 01:29PM</td>
<td class="col-xs-3">Ingeo Systems Inc.</td>
<td class="col-xs-3"></td>
<td class="col-xs-2">Submit Group</td>
</tr>
<tr>
<td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
<td class="col-xs-2">08/14/2009 01:29PM</td>
<td class="col-xs-3">Ingeo Systems Inc.</td>
<td class="col-xs-3"></td>
<td class="col-xs-2">Submit Group</td>
</tr>
<tr>
<td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
<td class="col-xs-2">08/14/2009 01:29PM</td>
<td class="col-xs-3">Ingeo Systems Inc.</td>
<td class="col-xs-3"></td>
<td class="col-xs-2">Submit Group</td>
</tr>
</tbody>
<input type="hidden" id="groupObjectId"/>
</table>
</div>
<div id="pendingGroupsListBody" class="card-body panel-collapse card-body-resizable card-body-fixed-height paddingTop0">
<table id="pendingGroupListTable" class="table table-striped table-hover">
<tbody>
<tr>
<td class="col-xs-2" style="word-wrap:break-word"></span>4875</td>
<td class="col-xs-2">08/14/2009 01:29PM</td>
<td class="col-xs-3">ABC Systems Inc.</td>
<td class="col-xs-3"></td>
<td class="col-xs-2">Submit</td>
</tr>
<tr>
<td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
<td class="col-xs-2">08/14/2009 01:29PM</td>
<td class="col-xs-3">Ingeo Systems Inc.</td>
<td class="col-xs-3"></td>
<td class="col-xs-2">Submit Group</td>
</tr>
<tr>
<td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
<td class="col-xs-2">08/14/2009 01:29PM</td>
<td class="col-xs-3">Ingeo Systems Inc.</td>
<td class="col-xs-3"></td>
<td class="col-xs-2">Submit Group</td>
</tr>
<tr>
<td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
<td class="col-xs-2">08/14/2009 01:29PM</td>
<td class="col-xs-3">Ingeo Systems Inc.</td>
<td class="col-xs-3"></td>
<td class="col-xs-2">Submit Group</td>
</tr>
<tr>
<td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
<td class="col-xs-2">08/14/2009 01:29PM</td>
<td class="col-xs-3">Ingeo Systems Inc.</td>
<td class="col-xs-3"></td>
<td class="col-xs-2">Submit Group</td>
</tr>
<tr>
<td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
<td class="col-xs-2">08/14/2009 01:29PM</td>
<td class="col-xs-3">Ingeo Systems Inc.</td>
<td class="col-xs-3"></td>
<td class="col-xs-2">Submit Group</td>
</tr>
<tr>
<td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
<td class="col-xs-2">08/14/2009 01:29PM</td>
<td class="col-xs-3">Ingeo Systems Inc.</td>
<td class="col-xs-3"></td>
<td class="col-xs-2">Submit Group</td>
</tr>
<tr>
<td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
<td class="col-xs-2">08/14/2009 01:29PM</td>
<td class="col-xs-3">Ingeo Systems Inc.</td>
<td class="col-xs-3"></td>
<td class="col-xs-2">Submit Group</td>
</tr>
<tr>
<td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
<td class="col-xs-2">08/14/2009 01:29PM</td>
<td class="col-xs-3">Ingeo Systems Inc.</td>
<td class="col-xs-3"></td>
<td class="col-xs-2">Submit Group</td>
</tr>
</tbody>
<input type="hidden" id="groupObjectId"/>
</table>
</div>
<div id="pendingGroupsListBody" class="card-body panel-collapse card-body-resizable card-body-fixed-height paddingTop0">
<table id="pendingGroupListTable" class="table table-striped table-hover">
<tbody>
<tr>
<td class="col-xs-2" style="word-wrap:break-word"></span>4875</td>
<td class="col-xs-2">08/14/2009 01:29PM</td>
<td class="col-xs-3">ABC Systems Inc.</td>
<td class="col-xs-3"></td>
<td class="col-xs-2">Submit</td>
</tr>
<tr>
<td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
<td class="col-xs-2">08/14/2009 01:29PM</td>
<td class="col-xs-3">Ingeo Systems Inc.</td>
<td class="col-xs-3"></td>
<td class="col-xs-2">Submit Group</td>
</tr>
<tr>
<td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
<td class="col-xs-2">08/14/2009 01:29PM</td>
<td class="col-xs-3">Ingeo Systems Inc.</td>
<td class="col-xs-3"></td>
<td class="col-xs-2">Submit Group</td>
</tr>
<tr>
<td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
<td class="col-xs-2">08/14/2009 01:29PM</td>
<td class="col-xs-3">Ingeo Systems Inc.</td>
<td class="col-xs-3"></td>
<td class="col-xs-2">Submit Group</td>
</tr>
<tr>
<td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
<td class="col-xs-2">08/14/2009 01:29PM</td>
<td class="col-xs-3">Ingeo Systems Inc.</td>
<td class="col-xs-3"></td>
<td class="col-xs-2">Submit Group</td>
</tr>
<tr>
<td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
<td class="col-xs-2">08/14/2009 01:29PM</td>
<td class="col-xs-3">Ingeo Systems Inc.</td>
<td class="col-xs-3"></td>
<td class="col-xs-2">Submit Group</td>
</tr>
<tr>
<td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
<td class="col-xs-2">08/14/2009 01:29PM</td>
<td class="col-xs-3">Ingeo Systems Inc.</td>
<td class="col-xs-3"></td>
<td class="col-xs-2">Submit Group</td>
</tr>
<tr>
<td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
<td class="col-xs-2">08/14/2009 01:29PM</td>
<td class="col-xs-3">Ingeo Systems Inc.</td>
<td class="col-xs-3"></td>
<td class="col-xs-2">Submit Group</td>
</tr>
<tr>
<td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
<td class="col-xs-2">08/14/2009 01:29PM</td>
<td class="col-xs-3">Ingeo Systems Inc.</td>
<td class="col-xs-3"></td>
<td class="col-xs-2">Submit Group</td>
</tr>
</tbody>
<input type="hidden" id="groupObjectId"/>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>如果我们滚动屏幕，我想移动“文档摘要”卡，以便始终可以看到其中的值。
我尝试添加类sticky-top，sticky-bottom。
还修改css，如下所示：
.make-me-sticky {
position: sticky;
top: 0;
}
之前我有词缀，它工作正常，但是自从我更新到Bootstrap 4以来，我无法使其正常工作。看来该卡无法正常工作，或者我丢失了某些东西。
我想通过CSS而不是JavaScript来实现这一点。
我也可以通过将div与col类一起使用来解决重叠问题。
<div class="row">
<div class="col">
<div class="col-sm-3 col-lg-3 mb-3 mb-md-0 fixed-top sticky-top pt-5"
style="position: fixed;">Rest of code here</div>
<div class="col-sm-9 col-lg-9 " style="margin-left: 330px;padding-
top:10px;padding-bottom: 50px;">Rest of code here</div>
</div></div>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句