Bootstrap 响应表在 Flex 上下文中不起作用

Question

我需要带有侧边栏 ( ) 和基于 Flexbox 的<aside>主要内容 ( ) 的简单布局（始终为浏览器窗口的 100% 宽度）。<main>侧边栏具有恒定的宽度，主要内容具有灵活的宽度（浏览器宽度的其余部分）。

在主要内容中，我有一个大表格，我想使用响应式表格仅在表格容器上获得水平滚动。但是……这不起作用。我得到了整个窗口的水平滚动。

<div class="d-flex w-100">
  <aside>some sidebar content</aside>
  <main class="flex-grow-1">
    <div class="table-responsive"> <!-- problem is here! -->
      <table class="table">
        <tr>
          <td>1.Test</td>
          <td>2.Test</td>
          <td>3.Test</td>
          <!-- ... -->
          <td>21.Test</td>
        </tr>
      </table>
    </div>
  </main>
</div>

示例： https: //jsfiddle.net/cichy380/q34p5j1u/

Answer 1

按照Nisharg Shah 的建议，将我的列设置min-width为零，这对我的 Bootstrap 5 布局起到了作用。我无法从 Bootstrap 中找到合适的类，因此我创建了一个符合 Bootstrap 约定的自定义类：

.min-w-0 {
    min-width: 0;
}

这里将其应用于上面的示例。表格容器滚动而不是整个布局滚动。

.min-w-0 {
    min-width: 0;
}

.min-w-0 {
  min-width: 0;
}