Question

我在我的React项目中使用React-Bootstrap，并且想要在移动视图或XS视图中更改列顺序。

下面的代码为我提供了不错的2列布局，并在视口为xs时响应了1列：

    return (
      <Container>
        <Row className={styles.section}>
          <Col xs={12} md={6}>
            <h2>{this.props.heading}</h2>
            <p>{this.props.content}</p>
          </Col>
          <Col>
            <p>
              <img src={this.props.img} />
            </p>
          </Col>
        </Row>
      </Container>
    );

我想在xs / mobile视图中将第二列（带有{this.props.img}的列）放在顶部。

因此，我在该列中添加了xs={{ order: 1 }}：

<Col xs={{ order: 1 }}>
   <p>
     <img src={this.props.img} />
   </p>
</Col>

但是那没有用。使用香草Bootstrap，您可以添加class="order-xs-1"，这样就可以了。

任何有关此的技巧都很好，谢谢！

Answer 1

我认为您应该在每个span上同时定义order和Col。像这样：

<Container>
  <Row>
    <Col xs={{ span: 12, order: 2 }} md={{ span: 6, order: 1 }}> First col </Col>
    <Col xs={{ span: 12, order: 1 }} md={{ span: 6, order: 2 }}> Second col </Col>
  </Row>
</Container>

Answer 2

实际上上述解决方案有效，但是每个col导致2个不同的行，因此当您有多于2行时，结果将更加可见。表示如果您有3个cols，例如：

<Row>
   <Col xs={{span: 12, order: 2 }}> 1st col but in small screen, 2nd col </Col>
   <Col xs={{span: 12, order: 1 }}> 2nd col but in small screen, 1st col </Col>
   <Col xs={{span: 12, order: 3 }}> 3rd col </Col>
</Row>

结果将在宽屏中显示如下：

[第一列，但在小屏幕上，第二列] [第一列，但在小屏幕上，第二列] [第三栏]

所以看起来不太好。我找到了另一种解决方案。正如我提到的，我有3个山口，我只是想让第一个和第二个互相移位。第一个是我的购物车图标，第二个是我的徽标。所以我用初始值定义了2个状态：

this.state = {
   logo_col_order: 2,
   cart_col_order: 1
}

然后在componentDidMount中，我检查了窗口innerWidth以查看其是否可移动，请更改cols的顺序：

componentDidMount() {

if(window.innerWidth <= 760) {
  this.setState({
    logo_col_order: 1,
    cart_col_order: 2,
  })
}

}

然后我将组件顺序更改为状态值：

<Row>
   <Col xs={{order: cart_col_order }}> 1st col but in small screen, 2nd col </Col>
   <Col xs={{order: logo_col_order }}> 2nd col but in small screen, 1st col </Col>
   <Col xs={{order: 3 }}> 3rd col </Col>
</Row>

请确保您所有的列都具有属性xs={{order: someNumber}}，否则您的布局将显得凌乱，并且不具有order属性的列将失去它们在屏幕上的位置。希望有帮助。

Answer 3

您也可以像香草（或原始结构）一样编码

<div>
<p>Paragraph 1</p>
</div>

<div>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>

<div>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</div>

<div>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
</div>

这里会发生什么，这样会显示

然后在MOBILE VIEW上

（听着，如果我先把标题放在代码上，那是行不通的，但是如果你把徽标放在首位，它将像上面的例子一样工作。我在自己的项目上测试了自己）

使用React-Bootstrap在Mobile视图中更改列顺序

3 个答案: