如何让 Reactstrap 响应式？

Question

我刚开始使用reactstrap（不是react-bootstrap），并且正在尝试如何渲染“移动”和“桌面”视图。

我如何让reactstrap在“移动”视图中以一种布局渲染页面，并在“桌面”视图中以另一种方式渲染页面？

我已经使用纯 CSS 完成了一些媒体查询工作，并根据不同项目中的大小渲染页面。

我该如何在reactstrap中做到这一点？我是否可以将所有内容包装在

<Container>

、

<Row>

和

<Col>

元素中，并为每个容器设置断点（sm、md、lg）？

我试图理解文档中的代码，但无法理解它们。

这是一个片段：https://reactstrap.github.io/?path=/docs/components-layout--layout

<Container>
...
<Row
    md="4"
    sm="2"
    xs="1"
  >
    <Col className="bg-light border">
      Column
    </Col>
    <Col className="bg-light border">
      Column
    </Col>
    <Col className="bg-light border">
      Column
    </Col>
    <Col className="bg-light border">
      Column
    </Col>
  </Row>
</Container>

我认为上面的意思是，当屏幕为 md 但大于 sm 时，将块中存在的行的列渲染为空间中的四列（每个网格单元 3 个，总共 12 个）。当屏幕为sm但大于xs时，将每一列分两列显示（每列6个网格单元）。当屏幕为 xs 或更小时，显示每一列，使其占据整个 12 个网格空间。

谢谢您的帮助！

Answer 1

是的，你是对的，基本上，

1

的断点意味着你只有1列（12个网格单元），

2

列

6

每列的网格单位，等等

使用reactstrap，您将为

Row

组件添加断点，下面有一个示例：

<Container>
  // here you will have 2 columns when screen is xs, each column with 6 grid units
  <Row xs="2">
    <Col className="bg-light border">
      Column
    </Col>
    <Col className="bg-light border">
      Column
    </Col>
    <Col className="bg-light border">
      Column
    </Col>
    <Col className="bg-light border">
      Column
    </Col>
  </Row>
  // here you will have 3 columns when screen is xs, each column with 4 grid units
  <Row xs="3">
    <Col className="bg-light border">
      Column
    </Col>
    <Col className="bg-light border">
      Column
    </Col>
    <Col className="bg-light border">
      Column
    </Col>
    <Col className="bg-light border">
      Column
    </Col>
  </Row>
  // here you will have 4 columns when screen is xs, each column with 3 grid units
  <Row xs="4">
    <Col className="bg-light border">
      Column
    </Col>
    <Col className="bg-light border">
      Column
    </Col>
    <Col className="bg-light border">
      Column
    </Col>
    <Col className="bg-light border">
      Column
    </Col>
  </Row>
  <h6>
    xs=“4“
  </h6>
  <Row xs="4">
    <Col className="bg-light border">
      Column
    </Col>
    <Col className="bg-light border">
      Column
    </Col>
    <Col
      className="bg-light border"
      xs="6"
    >
      xs=“6“
    </Col>
    <Col className="bg-light border">
      Column
    </Col>
  </Row>
  // here you will have 1 column when screen is xs, 2 column when is sm and 4 columns when is md
  <Row
    md="4"
    sm="2"
    xs="1"
  >
    <Col className="bg-light border">
      Column
    </Col>
    <Col className="bg-light border">
      Column
    </Col>
    <Col className="bg-light border">
      Column
    </Col>
    <Col className="bg-light border">
      Column
    </Col>
  </Row>
</Container>