react-bootstrap - 如何在 react-bootstrap 的布局屏幕大小上隐藏列？

Question

我要隐藏<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 列？

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 utils，类名的顺序很重要。