React-Bootstrap网格布局：屏幕缩放时行重叠问题求助

问题分析 #

问题根源在于第一行的Row使用了flex-fill类并结合h-100设置，在lg断点以下屏幕中，第一行两列垂直堆叠后，flex-fill会强制该行占据容器的全部可用高度，导致第二行内容被挤压到第一行区域内，形成重叠。

修复方案 #

通过Bootstrap响应式类，针对不同断点设置布局规则，让第一行在宽屏时保持占满高度的特性，在小屏时自适应内容高度：

修改后的代码 #

import { Col, Container, Row, Table } from "react-bootstrap";

const App = () => {
  return (
    <Container fluid className="d-flex flex-column h-100">
      {/* 仅在xl及以上屏幕启用flex-fill，小屏自动取消 */}
      <Row style={{minHeight: 0}} className="xl:flex-fill">
        <Col lg={12} xl={9} className="h-100 overflow-auto bg-info">
          <Table responsive>
            <thead>
              <tr>
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
              </tr>
            </thead>
            <tbody>
              {[...Array(100)].map((x, i) => (
                <tr key={i}>
                  <td>Row {i}</td>
                  <td>Row {i}</td>
                  <td>Row {i}</td>
                </tr>
              ))}
            </tbody>
          </Table>
        </Col>
        <Col
          lg={12}
          xl={3}
          className="xl:h-100 bg-secondary p-5 text-center text-white fs-1"
        >
          Content
        </Col>
      </Row>
      <Row>
        <Col style={{backgroundColor: "rgb(255,0,0,0.4)"}} className="p-5 text-white fs-1">
          Other Content
        </Col>
      </Row>
    </Container>
  );
};

export default App;

关键调整 #

1. 响应式flex-fill：将第一行Row的flex-fill替换为xl:flex-fill，仅在xl及以上宽屏生效，小屏时该行根据内容高度自适应，不再强制占满容器。
2. 移除不必要的h-100：第二行的Col去掉h-100，让其根据内容调整高度，确保小屏时能正常排列在第一行下方。

效果对比 #

• 断点前（lg及以上）：
  
• 断点后（lg以下）：
  

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