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

Question

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

我的表语法如下：

  <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 -->

如何让我的桌子缩小。

Answer 1

此代码似乎按预期工作。

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

对于其他响应式表格方法，请查看：http://www.webadvanced.com/news/painless-responsive-tables

PS col-12不在Bootstrap中，col-sm-12对于使col-lg-12多余的所有较大视图端口都有效。