引導與數據表不正確堆疊

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