jquery - 带有数据表的 Bootstrap 未正确堆叠

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>

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

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

高度是行高的百分比。

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

Answer 1

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

Here is the sample

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