reactjs - React Bootstrap 中的列宽度

Question

在 React 中，可以根据屏幕大小设置列宽度:

<Col xs={12} sm={4} md={4} lg={4}>

我遇到的问题是我的父组件正在并排渲染两个子组件，A 和 B。A 是一个表格，其中包含每个表格单元格中的其他组件，Child1、Child2 等。

如何定义 <Col> Child1 的宽度基于我的父 A 宽度而不是屏幕宽度？

Answer 1

Col 的宽度默认取决于父级的宽度，例如

<Col xs={6}>
  <Col xs={6}>
    A
  </Col>
  <Col xs={6}>
    A
  </Col>
</Col>    
<Col xs={6}>
  <Col xs={6}>
    B
  </Col>
  <Col xs={6}>
    B
  </Col>
</Col>

将导致

A    A    B    B

请发布您的代码和您得到的结果，以帮助我们找到问题。