Как скрыть колонки по размеру экрана макета на реакции-начальной загрузке?

Question

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

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

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

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

Answer 1

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

Например, если вы хотите скрыть 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, порядок имен классов важен.