html - 为什么我的 bootstrap 响应表没有缩小

Question

在 asp.net mvc5 上工作。为什么我的响应表不收缩？当我调整浏览器大小时而不是滚动出现时。

我的表格语法如下:

  <div class="col-12 col-sm-12 col-lg-12">
   <div class="table-responsive">
    <table class="table">
     <thead>
      <tr>
        <th>#</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
    </tbody>
  </table>
  </div>
  </div><!-- end col-12 -->

如何让我的 table 缩小。

Answer 1

此代码似乎按预期工作。

table-responsive允许表格自由溢出，以便内容将其推到最大大小。如果这太宽，请根据您的喜好添加一个具有最大宽度的自定义类。

有关替代响应表方法，请查看:http://www.webadvanced.com/news/painless-responsive-tables

附言col-12不在 Bootstrap 和 col-sm-12 中对所有较大的视口(viewport)有效 col-lg-12多余的。