为什么我的行和列在 react-bootstrap 的左侧略微偏左？

Question

我正在使用 react-bootstrap 使我的网站具有响应性。我之前使用过 react-bootstrap 并且总是遇到这个问题：在设置我的行和列时，它们稍微向左而不是居中，好像没有边距一样。我已经使用类名将整行居中，但它并没有像我想要的那样响应。这是我的代码，还没有 css 发生

const Projects = () => {
      return (
        <div className='Projects' >
          <Row className='mt-5 pt-5 my-auto'>

            <Col lg={4}> <img src={image} alt=""/> </Col>
   
            <Col lg={4}> <img src={image} alt=""/> </Col>
            
            <Col lg={4}> <img src={image} alt=""/> </Col>
  

          </Row>
        </div>
      );
    }

Here's what it looks like 稍微靠左，右边有一些空间。任何帮助表示赞赏！

Answer 1

Bootstrap 网格必须包含在 <Container> 中：

const Projects = () => {
      return (
        <Container className='Projects' >
          <Row className='mt-5 pt-5 my-auto'>

            <Col lg={4}> <img src={image} alt=""/> </Col>
   
            <Col lg={4}> <img src={image} alt=""/> </Col>
            
            <Col lg={4}> <img src={image} alt=""/> </Col>
  

          </Row>
        </Container>
      );
    }