1

我需要基于 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/

4

1 回答 1

1

正如Nisarg Shahmin-width所建议的那样，在我的专栏中设置为零可以使用我的 Bootstrap 5 布局来解决问题。我在 Bootstrap 中找不到合适的类，所以我创建了一个符合 Bootstrap 约定的自定义类：

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

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

.min-w-0 {
  min-width: 0;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="d-flex w-100 mw-100">
  <aside class="bg-info" style="height: 100px; min-width: 100px"></aside>
  <main class="bg-light flex-grow-1 min-w-0   ">
    <div class="table-responsive">
      <table class="table">
        <tr>
          <td>1.Test</td>
          <td>2.Test</td>
          <td>3.Test</td>
          <td>4.Test</td>
          <td>5.Test</td>
          <td>6.Test</td>
          <td>7.Test</td>
          <td>8.Test</td>
          <td>9.Test</td>
          <td>10.Test</td>
          <td>11.Test</td>
          <td>12.Test</td>
          <td>13.Test</td>
          <td>14.Test</td>
          <td>15.Test</td>
          <td>16.Test</td>
          <td>17.Test</td>
          <td>18.Test</td>
          <td>19.Test</td>
          <td>20.Test</td>
          <td>21.Test</td>
        </tr>
      </table>
    </div>
  </main>
</div>

于 2021-11-30T20:43:01.437 回答