启用Bootstrap后DataTables列可见性模态框无法渲染求助

问题 #

我做了个带列可见性按钮的DataTables基础示例，没加Bootstrap CSS的时候一切正常，但引入Bootstrap 5.2.0的CSS后，列选择的模态框直接没法用了。把下面这行CSS引入删掉，按钮又能正常工作：

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css">

原因 #

本质是样式冲突——DataTables自带的模态框和Bootstrap的模态框用了相同的类名（比如.modal），Bootstrap的CSS优先级更高，直接覆盖了DataTables模态框的样式，导致它的显示和交互功能失效。

解决方案 #

别直接混用原生DataTables和Bootstrap CSS，改用DataTables官方提供的Bootstrap适配版本，官方已经处理好了样式冲突问题：

1. 替换原生DataTables的CSS为Bootstrap适配版：

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.13.4/b-2.3.6/b-colvis-2.3.6/datatables.min.css">

2. 引入适配Bootstrap的DataTables JS文件（包含按钮插件）：

<script type="text/javascript" src="https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.13.4/b-2.3.6/b-colvis-2.3.6/datatables.min.js"></script>

3. 正常初始化DataTables即可，适配版会自动兼容Bootstrap样式：

$(document).ready(function() {
    $('#example').DataTable({
        dom: 'Bfrtip',
        buttons: ['colvis'],
        responsive: true
    });
});

这样调整后，列可见性按钮的模态框就能和Bootstrap样式完美兼容，功能恢复正常。

内容的提问来源于stack exchange，提问作者Easynow