React-Bootstrap <Row>高度异常求助：双列布局高度不符

我看你想要实现左侧固定200px高度，右侧Grid第一行和左侧等高的布局，刚好可以利用Flex布局的特性来搞定，结合你用的react-bootstrap组件，给你调整后的代码：

import React, { Component } from 'react';
import { Grid, Row, Col } from 'react-bootstrap';

class App extends Component {
  render() {
    return (
      <Grid fluid>
        {/* 外层Row确保左右列等高 */}
        <Row style={{ alignItems: 'stretch' }}>
          {/* 左侧固定高度列 */}
          <Col xs={2} style={{ 
            padding: '0', 
            backgroundColor: 'lightblue', 
            height: '200px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center'
          }}>
            Column 1 <br/>I am a 200 px tall column
          </Col>
          {/* 右侧列自动匹配左侧高度 */}
          <Col xs={10} style={{ padding: '0' }}>
            <Grid fluid style={{ height: '100%' }}>
              {/* 右侧第一行占满父容器高度（和左侧等高） */}
              <Row style={{ height: '100%' }}>
                <Col style={{ 
                  backgroundColor: 'lightgreen', 
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center'
                }}>
                  Right Column - Row 1 (matches left column height)
                </Col>
              </Row>
              {/* 右侧后续行正常显示 */}
              <Row>
                <Col style={{ backgroundColor: 'lightyellow', padding: '1rem' }}>
                  Right Column - Row 2
                </Col>
              </Row>
              <Row>
                <Col style={{ backgroundColor: 'pink', padding: '1rem' }}>
                  Right Column - Row 3
                </Col>
              </Row>
            </Grid>
          </Col>
        </Row>
      </Grid>
    );
  }
}

export default App;

关键要点说明： #

• 外层Row的alignItems: 'stretch'（默认就是这个值，显式写更直观）会让左右两个Col自动等高，右侧Col的高度会和左侧的200px保持一致。
• 右侧内部的Grid设置height: '100%'，确保它能占满父Col的全部高度。
• 右侧第一个Row设置height: '100%'，这样它就会填满内部Grid的高度，完美匹配左侧列的200px。
• 加了display: flex和对齐属性是为了让内容居中，你可以根据自己的需求调整或者去掉。

如果不用react-bootstrap，用原生CSS Grid的话思路也类似：外层用网格布局分两列，左侧固定高度，右侧第一个网格项占满容器高度就行，不过既然你已经在用react-bootstrap组件，上面的方案应该最贴合你的需求。

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