引导表调整大小/重新组织 col-sm答案

【问题标题】：Bootstrap table resize/reorganize for col-sm引导表调整大小/重新组织 col-sm
【发布时间】：2019-01-17 21:50:35
【问题描述】：

我是 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，但它添加了一个水平滚动，这并不好。有没有办法让表格内容适应屏幕大小的变化？

【问题讨论】：

你使用的是 bootstrap 3 还是 4？
@Prajwal Bootstrap 4
你为什么要使用表格。您可以使用 div 来实现它。谢谢

标签： html css twitter-bootstrap html-table

【解决方案1】：

你可以参考这些关于网格系统的知识。

Bootstrap 网格系统有四个类：
xs（适用于手机 - 屏幕宽度小于 768 像素）
sm（适用于平板电脑 - 屏幕宽度等于或大于 768 像素）
md（适用于小型笔记本电脑 - 屏幕宽度等于或大于 992 像素）
lg（适用于笔记本电脑和台式机 - 屏幕宽度等于或大于 1200 像素）

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

@media（最小宽度：992px）.col-md-4 {
宽度：X%； }

【讨论】：

【解决方案2】：

我在这里为你构建了它：https://codepen.io/anon/pen/PXvNvz

您似乎缺少的是表类：

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

我还把你的行类（你有 myLegend div）移到了文档的顶部，因为它看起来不像你在下面需要它

编辑：

我构建了我认为您正在尝试做的可能更好的不同方式的东西，这就是我的做法：https://codepen.io/anon/pen/jXorXQ?editors=1000

【讨论】：