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

Bootstrap表调整大小/为col-sm重新组织

2 个答案: