реагировать js bootstrap на изменения в разрешении экрана или изменении размера окна браузера

Question

У меня есть ряд кнопок, которые мне нравятся для изменения разрешения экрана или изменения размера окна браузера. Прямо сейчас, когда я меняю разрешение экрана или размер окна браузера, кнопка начинает перекрывать второй ряд. Я прочитал это bootstrap и отрегулировал размер кнопок или текста для обработки изменений.

Я прочитал другой пост и добавил следующий код, но он не совсем работает

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

Когда Я изменяю размер экрана View от 100% и ниже, кнопки меняются по высоте, и все кнопки остаются в одном ряду. Однако, когда я изменяю размер представления с помощью Ctrl + колесико мыши на более чем 100%, кнопки перекрываются на следующей строке. Я также вижу перекрытие строк кнопок при изменении размера окна браузера.

Есть ли способ изменить размер кнопок при превышении 100% и изменить размер окна браузера?

Я пытался добавить максимум - ширина: 90%! важно для стиля css, но это не сработало.

Любая помощь приветствуется. Спасибо

Answer 1

Решение состоит в том, чтобы использовать response- bootstrap Grid system, например, так: это поведение гарантирует, что столбцы (в данном случае ваши кнопки) будут течь 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>