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实用程序，则类名的顺序很重要。

Answer 2

您还可以使用react-bootstrap类在d-*-none中实现相同的效果。例如，仅在屏幕中等或更大时显示Col：

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

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

2 个答案: