Блог

Я хочу скрыть <Col></Col> на устройствах с маленьким экраном. Я проверил документацию react-bootstrap, но в ней не упоминается способ сделать это.

https://react-bootstrap.github.io/layout/grid/

В обычном виде react bootstrap этого можно достичь <div className="hidden-xs"></div> , но с использованием библиотеки react-bootstrap, которая больше не работает. Я пробовал: <Col xs="0"></Col> и подобное, но это не сработало.

Кто-нибудь знает, как скрыть столбец react-bootstrap?

Я полагаю, вы используете последнюю react-bootstrap библиотеку, которая использует bootstrap версию 4. Если вы хотите скрыть что-то по умолчанию, а затем отобразить на выбранном носителе, вам следует использовать display служебные classnames.

Например, если вы хотите скрыть размер Col на small экране, но хотите отобразить на large экране:

 <Container>
  <Row>
    <Col sm={12} lg={4} className="d-none d-lg-block">
      {/* your content */}
    </Col>
    <Col sm={12} lg={8}>
      {/* your content */}
    </Col>
  </Row>
</Container>
  

Если вы используете display утилиты, порядок имен классов важен.

Вы также можете добиться того же эффекта при react-bootstrap использовании класса d-*-none . Например, отображение только Col , когда экран средний или больше:

 <Row>
   <Col className='d-md-block d-sm-none'>
      ...
   </Col
   ...
</Row>