带有“responsive”属性的React-Bootstrap Table在Vite项目中没有滚动功能

Question

我遇到一个问题，当屏幕尺寸在 x 方向上小于它时，我的 React-Bootstrap Table 会溢出视口。我使用响应式道具将其制作成响应式表格。但是，overflow-x：滚动功能不起作用。如何让溢出发挥作用？

我有一个标准的 Typescript Vite 项目。我唯一更改的文件是将 App.tsx 更改为以下内容：

import { Table } from "react-bootstrap";
import "./App.css";
import "./styles.scss";

function App() {
  return (
    <div>
      <span>Connected Devices:</span>
      <Table
        striped
        bordered
        hover
        responsive
      >
        <thead>
          <tr>
            <th>IP Address</th>
            <th>Protocol</th>
            <th>Duration</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>xxx.xxx.x.xx:xxxxx</td>
            <td> ASCII</td>
            <td>00:00:42</td>
          </tr>
        </tbody>
      </Table>
    </div>
  );
}

export default App;

我正在使用 styles.scss 文件导入 React-Bootstrap CSS：

@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/utilities";

@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/tables";

@import "../node_modules/bootstrap/scss/forms";
@import "../node_modules/bootstrap/scss/buttons";
@import "../node_modules/bootstrap/scss/transitions";
@import "../node_modules/bootstrap/scss/nav";
@import "../node_modules/bootstrap/scss/navbar";
@import "../node_modules/bootstrap/scss/card";
@import "../node_modules/bootstrap/scss/list-group";
@import "../node_modules/bootstrap/scss/close";
@import "../node_modules/bootstrap/scss/toasts";
@import "../node_modules/bootstrap/scss/tooltip";

@import "../node_modules/bootstrap/scss/utilities/api";

屏幕尺寸小于宽度时的结果如下：

另外 3 个选项可以使用条纹、边框和悬停功能，只是没有响应。

我注意到此选项添加的选择器使用了 -webkit-overflow-scrolling 属性，该属性现在被认为是无效的。

我正在使用 bootstrap 版本^5.3.2 和react-bootstrap ^2.9.0，这是发布时的最新版本。

Answer 1

问题与 #root 元素有关，App 组件在 main.jsx 中呈现到该元素中。 #root 元素的宽度没有限制，因此由于它是 table 元素的后代，因此没有任何限制表宽度。

为了解决这个问题，我给根部设置了等于 100vw 的宽度。

#root {
  margin: 0 auto;
  padding: 2rem;
  width: 100vw;
}