数据表响应式不在引导断点处调整大小

Question

我遇到了问题，我相信我已将其范围缩小到 DataTables Responsive 插件。 看这里

所以在 Bootstrap 中，我有两列，每列六列。左边是一个 DataTable，右边是一个 div 框。当浏览器缩小范围时，这两个项目应该分成自己的行，彼此堆叠在一起，项目居中。但是，在该断点处，DataTable 不会调整大小以在屏幕上居中。它保持在左侧。如果您以该宽度刷新页面，它将很好地居中，它只是不响应断点。
如果您执行相反的操作并以手机大小开始页面并将窗口展开，则数据表将保持在左侧的细列中。

如果我取出响应式插件，它会在断点处很好地居中。但是，我想使用这个插件来帮助处理手机大小的表格。

下面是该行的示例。

<div class="row">
    <div class="col-md-6">
        <table id="table1" class="table">
            <thead>
                <tr>
                    <th>data</th>
                    <th>data</th>
                    <th>data</th>
                    <th>data</th>
                 </tr>
            </thead>
            <tbody>
                <tr>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="col-md-6">
        <div class="box">

        </div>
    </div>
</div><!--End Row-->

这是我正在使用的CSS

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>    

<link href="//cdn.datatables.net/1.10.8/css/dataTables.dataTables.min.css" rel="stylesheet"/> 

<link href="//cdn.datatables.net/responsive/1.0.7/css/responsive.dataTables.min.css" rel="stylesheet"/>

这是我正在使用的js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script src="//cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>

<script src="//cdn.datatables.net/responsive/1.0.7/js/dataTables.responsive.min.js"></script>

Answer 1

我有同样的问题，这是我的解决方法：

$(window).resize(function () {
            $("table.dataTable").resize();
});