React Bootstrap双列布局如何实现内容行始终对齐 适配响应式

错位是两个写法问题导致的：

1. 把左右两栏的内容分别塞到两个独立Col里垂直排列，左右每段文字的行高会随内容长度、屏幕宽度自适应变化，根本没法保证同一行的内容水平对齐
2. 给Col同时配置了栅格跨度xs={6}/xs={5}，又手动加了flex: 1样式，直接覆盖了Bootstrap栅格默认的宽度计算逻辑，不同屏幕尺寸下必然出现宽度错位

当前错位效果 #

期望对齐效果 #

别按列拆内容，按行拆：每一行字段单独用一个Row容器，内部放两个Col分别放左右对应字段，天然就能保证同一行内容永远水平对齐，不需要写JS监听尺寸、计算行高，全尺寸响应式不会错位。

修正后可直接运行的代码：

<Container 
  fluid 
  style={{
    width: '100%', 
    border: '1px solid black', 
    backgroundColor: 'white', 
    borderRadius: '10px',
    marginTop: '8px', 
    boxShadow: '-10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0)',
    WebkitBoxShadow: '-10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0)',
    padding: 0,
  }}
>
  {/* 第一行：Name / test */}
  <Row className="gx-0" style={{ margin: 0, padding: sizeWidht < 650 ? 5 : 10 }}>
    <Col xs={6} style={{ borderRight: '1px solid black', padding: '0 5px' }}>
      <p className="mb-0"><strong>Name: </strong>{name}</p>
    </Col>
    <Col xs={6} style={{ padding: '0 5px' }}>
      <p className="mb-0"><strong>test:</strong> {test}</p>
    </Col>
  </Row>
  {/* 第二行：age / test2 */}
  <Row className="gx-0" style={{ margin: 0, padding: sizeWidht < 650 ? 5 : 10, borderTop: '1px solid #eee' }}>
    <Col xs={6} style={{ borderRight: '1px solid black', padding: '0 5px' }}>
      <p className="mb-0"><strong>age:</strong> {age}</p>
    </Col>
    <Col xs={6} style={{ padding: '0 5px' }}>
      <p className="mb-0"><strong>test2: </strong>{test2}</p>
    </Col>
  </Row>
  {/* 第三行：description / test3 */}
  <Row className="gx-0" style={{ margin: 0, padding: sizeWidht < 650 ? 5 : 10, borderTop: '1px solid #eee' }}>
    <Col xs={6} style={{ borderRight: '1px solid black', padding: '0 5px' }}>
      <p className="mb-0"><strong>description:</strong> {description}</p>
    </Col>
    <Col xs={6} style={{ padding: '0 5px' }}>
      <p className="mb-0"><strong>test3:</strong> {test3}</p>
    </Col>
  </Row>
</Container>

• 删掉Col上手动加的flex:1，Bootstrap的Col组件本身已经做了flex适配，手动加会打乱栅格宽度计算
• 给Row加gx-0类去掉栅格默认的左右间距，避免出现多余的横向偏移
• 给p标签加mb-0去掉默认下边距，行间距通过Row的padding统一控制，对齐精度更高
• 不需要行之间的浅灰分隔线的话，直接删掉对应Row上的borderTop样式就行

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