Reactjs 对屏幕分辨率或浏览器窗口大小的更改做出js引导响应

我有一排按钮，我喜欢根据屏幕分辨率或浏览器窗口大小的变化进行调整。现在，当我更改屏幕分辨率或浏览器窗口大小时，按钮开始重叠到第二行。我阅读引导并调整按钮或文本的大小以处理更改

我读了另一篇文章并添加了以下代码，但它并不完全有效

<Grid fluid={true}>
  <Row">
    <Col md={3}>
      <Button ...>
    </Col> 
    <Col md={3}>
      <Button ...>
    </Col> 
    <Col md={3}>
      <Button ...>
    </Col> <Col md={3}>
      <Button ...>
    </Col> 
  </Row>
</Grid>

一种解决方案是使用如下react引导网格系统：
此行为将确保列（在本例中称为您的按钮）在没有剩余空间时自动流动
，
，它们将从下一行开始，不会像现在一样重叠：

import { Container, Row, Col } from 'react-bootstrap' 

...

<Container>
  <Row>
    <Col xs='auto'><Button ... /></Col>
    <Col xs='auto'><Button ... /></Col>
    <Col xs='auto'><Button ... /></Col>
    <Col xs='auto'><Button ... /></Col>
    <Col xs='auto'><Button ... /></Col>
    <Col xs='auto'><Button ... /></Col>
    <Col xs='auto'><Button ... /></Col>
    <Col xs='auto'><Button ... /></Col>
    <Col xs='auto'><Button ... /></Col>
  </Row>
</Container>

从'react bootstrap'导入{Container，Row，Col}
...

或者，如果您只使用css：

<div className='container'>
   <div className='row'>
      <div className='col'><Button ... /></div>
      <div className='col'><Button ... /></div>
      <div className='col'><Button ... /></div>
      <div className='col'><Button ... /></div>
   </div>
</div>


将每个按钮都包在里面
你想要的行为是什么？谢谢。容器元素非常有用。我添加了代码，但还需要进一步完善。谢谢。很高兴我能帮上忙，你能把它标记为正确答案吗？谢谢@user1250264