[英]How do I make a Container fill the whole page in React?
I am trying to get my container from react-bootstrap to fill the whole page both height-wise and width-wise.我正在尝试从 react-bootstrap 获取容器以在高度和宽度方面填充整个页面。 This is my CSS for my App.js:这是我的 App.js 的 CSS:
.main-content{
display: flex;
height: 100vh;
width: 100%;
background-color: black;
color:white;
}
and here is the code inside my App.js:这是我的 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
And when I load the webpage the page is filled height-wise but has some spaces in the width on the left and right:当我加载网页时,页面按高度填充,但左右宽度有一些空格:
You can always set the width to 100vw
.您始终可以将宽度设置为100vw
。 Your component probably has a parent that doesn't fill the page.您的组件可能有一个没有填满页面的父组件。
Don't put it inside <Container>
.不要把它放在<Container>
里面。 Bootstrap's container has max-width
or width
and margin-left: auto;
Bootstrap 的容器有max-width
或width
和margin-left: auto;
margin-right: auto
applied to it. margin-right: auto
应用到它。
So, it does not fill page and is center aligned.因此,它不会填满页面并且居中对齐。
Do something like this:做这样的事情:
<div className='main-content'>
<Container>
Hello World
</Container>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.