DataTables未正确堆叠的引导

Question

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>

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

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

高度是行高度的百分比。

我希望".thirdDiv“将堆叠在firstDiv和dataTable之下。目前，它落后于dataTable。

Answer 1

在on sm-9中创建两个.row类，并将第一个div和datatable放在每一行。

Here is the sample

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