Bootstrap（4） - 列中的多個表溢出父元素

Question

使用Bootstrap（4測試版）並試圖在兩個並排列中顯示兩個表。但是，由於某些原因，它們並未包含在父元素中，因此無法弄清楚如何正確更改佈局。底部的圖片顯示了它當前如何渲染。 （瀏覽器的目標是IE10及以上）

<div class="quote"> 
    <h6>data</h6> 
    <div class="row"> 
     <div class="col"> 
     <div><img src="" alt="" class="__web-inspector-hide-shortcut__"></div> 
     <div> 
     </div> 
     </div> 
     <div class="col"> 
     <p>data</p> 
     <p>data</p> 
     </div> 
     <div class="col"> 
     <p>Key features:</p> 
     <p>Fixed<br>data</p> 
     </div> 
     <div class="col savings"> 

     <h6 class="text">data</h6> 

     <h4>data</h4> 

     </div> 
     <div class="col"> 
     <button class="btn btn-cta-secondary btn-sm" data-id="83145667" id="button">More Info</button> 

      <a class="btn btn-cta-primary" href="https://stackoverflow.com/users/profile/83145667">Proceed</a> 

     </div> 
    </div> 

    <div class="row til" id="til83145667" style=""> 
     <table class="table col-lg-4"> 

     <tbody> 
     <tr> 
      <td>data</td> 
      <td>data</td> 
     </tr> 

     <tr> 
      <td>data</td> 
      <td>data</td> 
     </tr> 
     <tr> 
      <td>data</td> 
      <td>data</td> 
     </tr> 
     <tr> 
      <td>data</td> 
      <td>data</td> 
     </tr> 
     <tr> 
      <td>data</td> 
      <td>data</td> 
     </tr> 
     <tr> 
      <td>data</td> 
      <td>data</td> 
     </tr> 
     <tr> 
      <td>data</td> 
      <td>data</td> 

     </tr> 
     <tr> 
      <td>data</td> 
      <td>data</td> 
     </tr> 
     <tr> 
      <td>data</td> 
      <td>data</td> 
     </tr> 
     </tbody> 
     </table> 
     <table class="col-lg-4 table"> 

     <tbody> 
     <tr> 
      <td>data</td> 
      <td>data</td> 
     </tr> 
     <tr> 
      <td>data</td> 
      <td>data</td> 
     </tr> 
     <tr> 
      <td>data</td> 
      <td>data</td> 
     </tr> 
     <tr> 
      <td>data</td> 
      <td>data</td> 
     </tr> 
     <tr> 
      <td>data</td> 
      <td>data</td> 
     </tr> 
     <tr> 
      <td>data</td> 
      <td>data</td> 
     </tr> 
     <tr> 
      <td>data</td> 
      <td></td> 
     </tr> 
     <tr> 
      <td>data</td> 
      <td>data</td> 
     </tr> 
     <tr> 
      <td>data</td> 
      <td>data</td> 
     </tr> 
     </tbody> 
     </table> 
    </div> 
    </div> 

Answer 1

你有幾個問題：

1：您的行列數必須在container例如

<div class="quote container"> 
    <h6>data</h6> 
     <div class="row"> 
      [...] 

2：不要直接添加col類的<table> element - 把表中有該類一個div，例如

<div class="row til" id="til83145667" style=""> 
    <div class="col-lg-4"> 
     <table class="table"> 
      [...] 

工作片段（注意，我添加了一個邊框的表格，讓他們清楚）：

table { 
 
    border: 2px solid #009999; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="quote container"> 
 
    <h6>data</h6> 
 
    <div class="row"> 
 
    <div class="col"> 
 
     <div><img src="" alt="" class="__web-inspector-hide-shortcut__"></div> 
 
     <div> 
 
     </div> 
 
    </div> 
 
    <div class="col"> 
 
     <p>data</p> 
 
     <p>data</p> 
 
    </div> 
 
    <div class="col"> 
 
     <p>Key features:</p> 
 
     <p>Fixed<br>data</p> 
 
    </div> 
 
    <div class="col savings"> 
 

 
     <h6 class="text">data</h6> 
 

 
     <h4>data</h4> 
 

 
    </div> 
 
    <div class="col"> 
 
     <button class="btn btn-cta-secondary btn-sm" data-id="83145667" id="button">More Info</button> 
 

 
     <a class="btn btn-cta-primary" href="https://stackoverflow.com/users/profile/83145667">Proceed</a> 
 

 
    </div> 
 
    </div> 
 

 
    <div class="row til" id="til83145667" style=""> 
 
    <div class=" col-lg-4"> 
 
     <table class="table"> 
 
     <tbody> 
 
      <tr> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      </tr> 
 

 
      <tr> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      </tr> 
 
      <tr> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      </tr> 
 
      <tr> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      </tr> 
 
      <tr> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      </tr> 
 
      <tr> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      </tr> 
 
      <tr> 
 
      <td>data</td> 
 
      <td>data</td> 
 

 
      </tr> 
 
      <tr> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      </tr> 
 
      <tr> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </div> 
 
    <div class="col-lg-4"> 
 
     <table class=" table"> 
 

 
     <tbody> 
 
      <tr> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      </tr> 
 
      <tr> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      </tr> 
 
      <tr> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      </tr> 
 
      <tr> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      </tr> 
 
      <tr> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      </tr> 
 
      <tr> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      </tr> 
 
      <tr> 
 
      <td>data</td> 
 
      <td></td> 
 
      </tr> 
 
      <tr> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      </tr> 
 
      <tr> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </div> 
 
    </div> 
 
</div>