html - 用于 col-sm 的 Bootstrap 表调整大小/重组

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

关于网格系统的这些知识你可以引用。

The Bootstrap grid system has four classes:
xs (for phones - screens less than 768px wide)
sm (for tablets - screens equal to or greater than 768px wide)
md (for small laptops - screens equal to or greater than 992px wide)
lg (for laptops and desktops - screens equal to or greater than 1200px wide)

如果你想要你的自定义，你可以在默认的 css 文件 bootstrap.min.css 中覆盖 X 百分比

@media (min-width: 992px) .col-md-4 {
width: X%; }