Bootstrap表調整大小/為col-sm重新組織

Question

我是Bootstrap和表的新手，我有一個表一直在用它作為圖表的圖例：

<div class="col-md-4 col-sm-12" id="chart1" style="display:none; border: 1px solid lightgray; padding-top:2%">
    <h3 style="text-align:center"><b>MY CHART</b></h3>
    <div id="chart" style="width:100%; min-height:500px"></div>
    <div id="myLegend" style="width:70%; height:40px;  margin: 0 auto;" class="row">
       <table style="font-size:18px; color:#545454">
          <tbody>
              <tr>
                 <td>
                    <div style="border:1px solid #ccc; padding: 1px">
                         <div style="width:4px; height:0; border: 5px solid rgb(145,207,80); overflow: hidden"></div>
                    </div>
                 </td>
                 <td>First Val</td>
                 <td>
                    <div style="border:1px solid #ccc; padding: 1px">
                         <div style="width:4px; height:0; border: 5px solid rgb(112,171,70); overflow: hidden"></div>
                    </div>
                </td>
                <td>Second Val</td>
                <td>
                    <div style="border:1px solid #ccc; padding: 1px">
                       <div style="width:4px; height:0; border: 5px solid rgb(255,191,0); overflow: hidden"></div>
                    </div>
                </td>
                <td>Third Val</td>
                <td>
                    <div style="border:1px solid #ccc; padding: 1px">
                         <div style="width:4px; height:0; border: 5px solid rgb(255,0,0); overflow: hidden"></div>
                    </div>
                </td>
                <td>Forth Val</td>
             </tr>
        </tbody>
      </table>
  </div>
</div>

在較大的屏幕上，圖例看起來不錯，但是當屏幕較小但仍大於col-sm時，表將以id chart1進入div之外，我需要以某種方式將其調整大小/重組為兩行以適合div。 我嘗試使用table-responsive但是它添加了水平滾動，這不好。 當屏幕尺寸改變時，有沒有辦法使表格內容合適？

Answer 1

您可以參考這些有關網格系統的知識。

Bootstrap網格系統有四個類：
xs（用於電話-屏幕寬度小於768像素）
sm（適用於平板電腦-屏幕寬度等於或大於768像素）
md（適用於小型筆記本電腦-屏幕寬度等於或大於992px）
lg（適用於筆記本電腦和台式機-屏幕寬度等於或大於1200像素）

如果要自定義，則可以覆蓋默認CSS文件bootstrap.min.css中的X百分比。

@media（最小寬度：992px）.col-md-4 {
寬度：X％; }

Answer 2

我在這里為您構建了它： https : //codepen.io/anon/pen/PXvNvz

您似乎缺少的是表類：

<table class="table"></table>

我也將您具有myLegend div的行類移到了文檔的頂部，因為它看起來像下面一樣

編輯：

我建立了我認為您正在嘗試采用另一種可能更好的方法的方法，這就是我的解決方法： https : //codepen.io/anon/pen/jXorXQ?editors=1000