React Bootstrap 中的列宽度答案

【问题标题】：Col width in React BootstrapReact Bootstrap 中的列宽度
【发布时间】：2018-12-01 15:58:46
【问题描述】：

在 react 中，可以根据屏幕大小设置 col 宽度：

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

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

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

【问题讨论】：

标签： reactjs react-bootstrap

【解决方案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

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

【讨论】：

Col 宽度默认不依赖于父级的宽度。根据文档：The number of columns you wish to span for Extra small devices Phones (<768px) class-prefix col-xs-
这是让您更好地控制响应式设计的引导方式。也就是说，如果您使用<Col xs={6} md={4} lg={2} />，那么它将在小屏幕（xs）中呈现父级宽度的一半，中等屏幕（md）中父级宽度的三分之一，依此类推。但这将取决于父母的宽度，而不是屏幕的宽度。