对屏幕分辨率或浏览器窗口调整大小的变化做出反应 js 引导响应

Question

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

我阅读了另一篇文章并添加了以下代码，但效果不佳

<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>

当我从 100% 及以下调整屏幕视图大小时，按钮的高度正在调整，所有按钮都保持在同一行。但是，当我将使用 Ctrl + 鼠标滚轮调整视图大小更改为 100% 以上时，按钮会与下一行重叠。调整浏览器窗口大小时，我还看到按钮行重叠。

有没有办法在超过 100% 时调整按钮大小并更改浏览器窗口大小？

我尝试在 css 样式中添加 max-width: 90% !important，但这不起作用。

感谢任何帮助。谢谢

Answer 1

解决方案是使用 react-bootstrap Grid 系统，如下所示： 此行为将确保列（在这种情况下也称为您的按钮）在没有剩余空间时流动automatically，它们将从下一行开始，而不是像现在这样重叠：

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>

或者如果你只使用 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>