我在引導 v5.2.1 模式中有一個資料表。當我打開模態并嘗試翻閱資料時，模態立即隱藏自身。bootstrap v5.2.0 不會發生這種情況。
為什么會這樣？
引導模式中的資料表演示：
BS v5.2.0 演示
BS v5.2.1 演示
帶有問題的 BS v.5.2.1 代碼片段：
$(document).ready(function() {
$('#example').DataTable({
scrollY: "40vh",
scrollCollapse: true,
scroller: true,
responsive: true
});
$(document).on('shown.bs.modal', '#modal', function() {
$($.fn.dataTable.tables(true)).DataTable()
.columns.adjust()
.responsive.recalc()
.scroller.measure();
});
$('#exampleModal').on('hide.bs.modal hidden.bs.modal', function(e) {
//console.log(e);
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables.net-bs5/1.12.1/dataTables.bootstrap5.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables.net-bs5/1.12.1/dataTables.bootstrap5.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.1/js/bootstrap.bundle.min.js"></script>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<table id="example" class="table table-striped table-bordered table-hovered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>[email protected]</td>
<td>User</td>
</tr>
<tr>
<td>2</td>
<td>[email protected]</td>
<td>Admin</td>
</tr>
<tr>
<td>1</td>
<td>[email protected]</td>
<td>User</td>
</tr>
<tr>
<td>2</td>
<td>[email protected]</td>
<td>Admin</td>
</tr>
<tr>
<td>1</td>
<td>[email protected]</td>
<td>User</td>
</tr>
<tr>
<td>2</td>
<td>[email protected]</td>
<td>Admin</td>
</tr>
<tr>
<td>1</td>
<td>[email protected]</td>
<td>User</td>
</tr>
<tr>
<td>2</td>
<td>[email protected]</td>
<td>Admin</td>
</tr>
<tr>
<td>1</td>
<td>[email protected]</td>
<td>User</td>
</tr>
<tr>
<td>2</td>
<td>[email protected]</td>
<td>Admin</td>
</tr>
<tr>
<td>1</td>
<td>[email protected]</td>
<td>User</td>
</tr>
<tr>
<td>2</td>
<td>[email protected]</td>
<td>Admin</td>
</tr>
<tr>
<td>1</td>
<td>[email protected]</td>
<td>User</td>
</tr>
<tr>
<td>2</td>
<td>[email protected]</td>
<td>Admin</td>
</tr>
<tr>
<td>1</td>
<td>[email protected]</td>
<td>User</td>
</tr>
<tr>
<td>2</td>
<td>[email protected]</td>
<td>Admin</td>
</tr>
<tr>
<td>1</td>
<td>[email protected]</td>
<td>User</td>
</tr>
<tr>
<td>2</td>
<td>[email protected]</td>
<td>Admin</td>
</tr>
<tr>
<td>1</td>
<td>[email protected]</td>
<td>User</td>
</tr>
<tr>
<td>2</td>
<td>[email protected]</td>
<td>Admin</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>uj5u.com熱心網友回復：
此引導程式版本和模態(github)存在問題。它已在此拉取請求中解決， 但尚未發布。與此同時，您可以回傳到 5.2.0 版本。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/516854.html
標籤：javascripthtmljQuery推特引导数据表
上一篇：在引導網格中的專案之間添加邊距