有没有办法在 react-bootstrap 中使用引导类？

Question

我无法让引导类与 react-bootstrap 一起使用

我尝试在 react-bootstrap 中使用引导类，特别是弹性属性，但它似乎不起作用。但是在文档上，它显示了一个使用它“https://react-bootstrap.netlify.com/layout/grid/”的示例，文档也看起来很模糊，所以我去了引导程序的文档，但在那里也无济于事。

我注意到当我更改了多少个 Col（比如这个 col md={4}）时，我希望一个特定的 col 元素占据这个按钮的位置，即使它应该在中心，为什么会这样？这是我的代码示例

import React from 'react';
import'./Welcome.css';
import { Button, Container, Col, Row } from 'react-bootstrap';

class Welcome extends React.Component {
  render() {
    return(
      <div className="welcome">
          <Container>
            <Row className="justify-content-center">
              <Col>
                <Button variant="primary" size="lg">Large button</Button>
              </Col>
            </Row>
          </Container>
      </div>
    );
  }
}

export default Welcome;

我对 react 也很陌生，对 react-bootstrap 更是如此，但我对 bootstrap 非常熟悉，这让我准备好只使用 CSS grid 或 flex 而不是使用 bootstrap 的网格大声笑。因此，如果有人可以帮助我，那将非常感激。

Answer 1

试试这个。

<Container>
  <Row>
    <Col md={{ order: 'last' }}>First, but last</Col>
    <Col md>Second, but unordered</Col>
    <Col md={{ order: 'first' }}>Third, but first</Col>
  </Row>
</Container>