如何让容器填满 React 中的整个页面？

Question

我正在尝试从 react-bootstrap 获取容器以在高度和宽度方面填充整个页面。 这是我的 App.js 的 CSS：

.main-content{
  display: flex;
  height: 100vh;
  width: 100%;
  background-color: black;
  color:white;
}

这是我的 App.js 中的代码：

import React, { useState, useEffect} from 'react';
import { Container } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';

const App = () => {
  return (
    <Container className='main-content'>
      Hello World
    </Container>
  )
}

export default App

当我加载网页时，页面按高度填充，但左右宽度有一些空格：

Answer 1

您始终可以将宽度设置为100vw 。 您的组件可能有一个没有填满页面的父组件。

Answer 2

不要把它放在<Container>里面。 Bootstrap 的容器有max-width或width和margin-left: auto; margin-right: auto应用到它。

因此，它不会填满页面并且居中对齐。

做这样的事情：

<div className='main-content'>
  <Container>
    Hello World
  </Container>
</div>