Bootstrap5中DataTable小屏展开操作栏超出屏幕的解决问询

问题场景 #

基于Bootstrap 5开发后台管理页面，使用DataTables组件：

• 大屏设备显示正常
• 小屏设备上操作按钮自动折叠（符合预期），但点击行展开操作区域时，页面被撑开超出屏幕范围，需要将内容限制在屏幕内。

解决方案 #

通过优化布局、添加样式控制和调整DataTables配置来解决：

1. 优化操作列的按钮布局 #

利用Bootstrap的网格系统，将操作按钮分组排列，让按钮在小屏上自动换行，避免单行内容过长：

修改HTML中操作列的代码：

<td>
  <div class="row g-2">
    <div class="col-6">
      <a class="btn btn-sm bg-gradient-success w-100" type="button" href="{% url 'teacher_assign_class' each.id %}">assign Class</a>
    </div>
    <div class="col-6">
      <a class="btn btn-sm bg-gradient-info w-100" type="button" href="{% url 'teacher_make_admin' each.id %}">Make Admin</a>
    </div>
    <div class="col-6">
      <a class="btn btn-sm bg-gradient-danger w-100" type="button" href="{% url 'teacher_revoke_admin' each.id %}">Revoke Admin</a>
    </div>
    <div class="col-6">
      <a class="btn btn-sm bg-gradient-warning w-100" type="button" href="{% url 'teacher_edit' each.id %}">Edit Username</a>
    </div>
    <div class="col-6">
      <a class="btn btn-sm bg-gradient-warning w-100" type="button" href="{% url 'teacher_reset_password' each.id %}">Reset Password</a>
    </div>
    <div class="col-6">
      <a class="btn btn-sm bg-gradient-danger w-100" type="button" href="#" onclick="throw_warning('Are you sure, you want to delete this Teacher?', action_link='{% url "teacher_delete" each.id %}')">Delete</a>
    </div>
  </div>
</td>

2. 添加CSS限制展开内容的宽度 #

给DataTables响应式展开的容器添加样式，确保内容不会超出屏幕：

/* 限制响应式展开内容的宽度，超出时显示横向滚动 */
.dtr-details {
  width: 100%;
  overflow-x: auto;
}

/* 调整展开内容的内边距，优化显示 */
.dtr-details td {
  padding: 0.5rem;
}

3. 调整DataTables的响应式配置 #

修改JS代码，优化响应式细节的显示方式，避免布局冲突：

$(document).ready(function() {
  $('.main_table').DataTable({
    paging: false,
    responsive: {
      details: {
        display: $.fn.dataTable.Responsive.display.childRowImmediate,
        type: 'none',
        target: ''
      }
    },
    info: false,
    scrollX: false // 关闭横向滚动，让内容自适应容器宽度
  });
});

效果说明 #

• 小屏设备上，操作按钮会自动折叠，点击行展开后，按钮以两行两列的方式排列，不会超出屏幕宽度
• 若内容仍有超出，会自动显示横向滚动条，保证页面整体不会被撑开

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