使用 DataTables 的引导程序未正确堆叠答案

【问题标题】：bootstrap with DataTables not stacking properly使用 DataTables 的引导程序未正确堆叠
【发布时间】：2016-07-26 02:16:01
【问题描述】：

html:

<div class="container">
    <div class="row" style="height: 512px">
        <div class="col-sm-9">
            <div class="firstDiv"></div>
            <div class="dataTablesWrapper">
                <table id="myDataTable">
                   <thead></thead>
                   <tbody></tbody>
                </table>
            </div>
       </div>
       <div class="col-sm-3 thirdDiv"></div>
   </div>
</div>

我正在尝试将我的数据表放在 col-sm-9 类中，以便它具有响应性并且在调整大小时会堆叠。但发生的事情是它堆叠在我的 col-sm-3 类 div 之上并阻止它。我似乎找不到任何关于如何构造 dataTables 以使其具有响应性的示例。我想要的是这样的：

   col-sm-9     col-sm-3
------------- -------------
| firstDiv  | | thirdDiv  |
| height:50%| |height:100%| 
------------- |           |
------------- |           |
| dataTable | |           |
| height:50%| |           |
------------- -------------

height 是行高的百分比。

我希望“.thirdDiv”将堆叠在 firstDiv 和 dataTable 下方。目前它堆叠在 dataTable 后面。

【问题讨论】：

标签： jquery css twitter-bootstrap datatables

【解决方案1】：

在 col-sm-9 中创建两个 .row 类，并将您的第一个 div 和数据表放在每一行上。

Here is the sample

https://plnkr.co/edit/AkkEoStEIVaJGL5I3E4I?p=preview

【讨论】：