Question

我对使用反应装置(不是反应装置)抱着新意,试图总结一下如何形成“机动”和“台站”的看法。

How would I make reactstrap render the page in one layout in "mobile" view and another way in "desktop" view?

I have done some work with media queries with plain CSS and had the page render based on the size in a different project.

我如何在反应陷阱中这样做? 我是否在<代码><、Container>、、<、Row>、和<、Col>、要素中总结所有内容,并确定每个集装箱的破碎点(m、md, lg)?

我试图在笔试中宣传该守则,但是在理解这些守则方面遇到麻烦。

这里是一刀子:https://reactsgil.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>

我认为,上述意思是,当屏幕为平整,但大于点时,角的排栏为4栏(每组3个电网单位,共计12个)。当屏幕为m但大于x时,分两栏显示每个栏目(每栏6个电网单位)。当屏幕为X或小于X时,显示每一栏,因此它需要整个12个电网空间。

感谢你们的帮助!

Answer 1

是的,你重新正确,基本是<代码>1的破碎点,这意味着你只拥有1列(12个电网单位)、<代码>2栏,<代码>6各栏的电网单位,等等。

采用反应装置,将添加<代码>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>

友情链接