如何讓容器填滿 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>