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

【问题标题】：How to hide Columns on a layout screen size on react-bootstrap?如何在 react-bootstrap 的布局屏幕大小上隐藏列？
【发布时间】：2019-04-06 22:24:59
【问题描述】：

我想在小屏幕设备上隐藏<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

【解决方案1】：

我想你正在使用最新的react-bootstrap lib，它使用的是bootstrap v4。如果您想在默认情况下隐藏某些内容，然后想在选定的媒体尺寸上显示，您应该使用 display 实用程序类名。

例如，如果您想在small 屏幕尺寸上隐藏Col，但想在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 工具，类名的顺序很重要。

【讨论】：

【解决方案2】：

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

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

【讨论】：