Reactstrap 8 (Bootstrap4) 如何实现元素并排且减少列间距

解决方法 #

你将控制列宽的响应式属性错添加到了Row组件上，Reactstrap的栅格系统中，控制列宽度的属性需要挂载在Col组件上才能生效。

如果需要两列都根据内容宽度自适应并排，可使用如下写法：

<Container>
  <Row>
    <Col md="auto">Text1</Col>
    <Col md="auto">Text2</Col>
  </Row>
</Container>

如果需要实现一列按内容固定宽度、另一列占满剩余行宽的布局，调整为以下写法即可：

<Container>
  <Row>
    <Col md="auto">按内容撑开宽度</Col>
    <Col>占满行内剩余宽度</Col>
  </Row>
</Container>

如果需要该布局在所有屏幕尺寸下都生效，不需要仅在md断点以上生效，将md="auto"替换为xs="auto"即可。

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