twitter-bootstrap 响应式数据表在 Bootstrap 断点处不调整大小

DataTables Responsive Not Resizing at Bootstrap Breakpoint

提问by madvora

I'm having an issue and I believe I've narrowed it down to the DataTables Responsive plugin. See Here

我遇到了一个问题，我相信我已经将其范围缩小到 DataTables 响应式插件。 看这里

So in Bootstrap, I have two columns of six. A DataTable on the left and a div box on the right. When the browser narrows down, these two items should split into their own rows stacked on top of each other with the items centered. However, at that breakpoint, the DataTable doesn't resize to center on the screen. It stays over to the left. If you refresh the page at that width, it will center itself fine, it just doesn't respond to the breakpoint.
If you do the opposite and start the page at the size of a phone and expand the window out, the DataTable will stay scrunched up in a thin column on the left.

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

If I take out the responsive plugin, it will center itself fine at the breakpoint. However, I want to use this plugin to help with the table at phone size.

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

Here's an example of what that row looks like.

下面是该行的示例。

<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-->

Here's the css I'm using

这是我正在使用的 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"/>

Here's the js I'm using

这是我正在使用的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>

回答by vanburen

Here is an example using DataTables dependencies for Bootstrap.

这是一个使用 Bootstrap 的 DataTables 依赖项的示例。

Are you using the responsiveoption (responsive: truesee below) when you initiate DataTables?

您在启动 DataTables 时是否使用该responsive选项（responsive: true见下文）？

$('#table1').DataTable({
  responsive: true
});

.box {
  height: 100px;
  width: 100%;
  background: lightblue;
  padding: 20px;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.8/js/dataTables.bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.8/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <table id="table1" class="table table-striped table-bordered" cellspacing="0">
        <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">Box</div>
    </div>
  </div>
  <!--End Row-->
</div>

回答by Canada Wan

I've the same issue and this is my workaround:

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

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

回答by aclelland

I had an issue like this recently. I don't think you are using bootstrap correctly. Change your divs to the following.

我最近遇到了这样的问题。我认为您没有正确使用引导程序。将您的 div 更改为以下内容。

<div class="col-xs-12 col-md-6">

xs, sm, md, lg are the sizes of screens in order from smallest to largest. When you apply col-md-6 it will apply a width of 6 spaces to sizes md and above. You also need to specify that it should take up the full width for screens of sizes xs and above.

xs, sm, md, lg 是屏幕的大小，按从小到大的顺序排列。当您应用 col-md-6 时，它将为 md 及以上尺寸应用 6 个空格的宽度。您还需要指定它应该占据 xs 及以上尺寸的屏幕的全宽。