Bootstrap模态框内表格无法在小尺寸设备上实现响应式效果问题求助

问题原因 #

你使用的是Bootstrap 3框架，框架本身要求响应式表格必须包裹在带有.table-responsive类的外层容器中，才能在小尺寸屏幕下自动触发横向滚动适配，避免内容挤压或溢出容器。你目前只给表格添加了.table类，缺少对应的响应式外层容器，所以放在模态框中时小屏没有响应式表现。

解决方案 #

按以下两步修改即可：

1. 在表格外层添加Bootstrap 3官方指定的响应式表格容器，修改modal-body部分代码如下：

<div class="modal-body">
  <!-- 新增响应式表格容器 -->
  <div class="table-responsive">
    <table class="table">
      <!-- 此处保留你原有表格的全部内容不变 -->
    </table>
  </div>
</div>

2. 可按需添加小屏模态框宽度优化样式，避免左右留白过多挤压表格空间：

@media (max-width: 767px) {
  .modal-dialog {
    margin: 10px;
  }
}

如果表格列数过多，你也可以给非核心信息的列添加Bootstrap内置的响应式工具类hidden-xs，让这些列在手机尺寸下自动隐藏，进一步优化小屏显示效果。

内容的提问来源于stack exchange，提问作者TechDev