使用Reactstrap的offset属性未使Col元素居中

Question

我正在使用Reactstrap文档在React中构建一个页面（与Bootstrap 4相同）。如果屏幕较大，我希望3列在同一行中，当屏幕中等时，它们的前2列在同一行中，最后一列在下方居中，最后，在屏幕较小或多余时，小，然后将其中3个分别放在一个Row上。 问题是我使用offset属性（仅适用于md屏幕）将第三列居中，但是即使屏幕很大，似乎也应用了偏移并且仍然有2行。为什么？

代码

class App extends Component {

  render() {
    return (
     <div>
        <div className="App">
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
            <img src={'ff'} />
            <br/>
          </div>
            <br/>
            <br/><br/>
            <Container className="prova centered" fluid>
              <Row>
                <Col className="frame" xs={12} sm={6} md={4} lg={4}>
                  <Card className="card">
                  <CardImg className="cards" src={tile1} />
                    <CardBody>
                      <CardTitle> Recruitment Services</CardTitle>
                      <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                      <Button>Discover More!</Button>
                    </CardBody>
                  </Card>
                </Col>
                <Col className="frame" xs={12} sm={6} md={4} lg={4}>
                  <Card>
                  <CardImg className="cards" src={tile2} alt="Card image cap" />
                    <CardBody>
                      <CardTitle>Web Design and Web-mastering</CardTitle>
                      <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                      <Button>Discover More!</Button>
                    </CardBody>
                  </Card>
                </Col>
                <Col className="frame" xs={12} sm={{size: 7, offset: 3}} md={4} lg={4}>
                  <Card>
                  <CardImg className="frame cards" src={tile3} alt="Card image cap" />
                    <CardBody>
                      <CardTitle>Digital Marketing</CardTitle>
                      <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                      <Button>Discover More!</Button>
                    </CardBody>
                  </Card>
                </Col>
              </Row>
              </Container>
              <br/>
              <br/>
     </div>

    );
  }

}


export default App;

屏幕