我已经使用React-Bootstrap设置了网站样式。但是我一直面临使它响应的问题。我在下面将我的网站的屏幕快照和代码附加到下面。
Responsive Website Display - 320x602
登录页面的高度远远高于所需的高度。
APP.JSX
import React from "react";
import MainNav from "./Navbar";
import Home from "./Home";
import About from "./About";
function App() {
return (
<div>
<MainNav />
<Home />
<About />
</div>
);
}
export default App;
HOME.JSX
import React from "react";
import { Container, Row, Col } from "react-bootstrap";
function Home() {
return (
<div>
<Container fluid>
<div className="center" style={{ fontWeight: 700 }}>
<h6>Hey! I am</h6>
<h1>Abhuday Mishra</h1>
<h3>
a{" "}
<span className="desc">
<em>Web Developer.</em>
</span>
</h3>
</div>
</Container>
</div>
);
}
export default Home;
STYLES.CSS
.html {
display: block;
height: 100%;
}
.center {
font-family: "Poppins", sans-serif;
font-weight: 700;
text-align: center;
align-items: center;
margin-top: 14%;
}
.center h1 {
font-family: "Poppins", sans-serif;
font-weight: 700;
padding-top: 20px;
font-size: 75px;
padding-bottom: 20px;
}
.center h6 {
color: blue;
font-size: 20px;
}
.navlink {
font-family: "Poppins", sans-serif;
font-weight: 400;
margin-right: 40px;
}
.desc {
color: blue;
text-decoration: underline;
}
.navbrand {
margin-left: 10px;
}
.logo {
height: 35px;
width: 120px;
}
body {
display: block;
font-family: "Poppins", sans-serif;
height: 100%;
}
.container-fluid {
display: flex;
flex-direction: column;
height: 100vh;
background: rgb(234, 255, 208);
background: linear-gradient(
90deg,
rgba(234, 255, 208, 1) 50%,
rgba(255, 255, 255, 1) 51%
);
background-size: cover;
}
.displaypic {
display: block;
text-align: center;
position: relative;
top: 20%;
left: 20%;
margin-top: 20px;
border-radius: 100%;
}
.centerBlock {
display: table;
margin: auto;
}
.abouth1 {
font-family: "Poppins", sans-serif;
font-weight: 700;
text-align: center;
margin-top: 50px;
text-decoration-style: double;
text-decoration-line: overline underline;
}
.tablecontent {
font-family: "Poppins", sans-serif;
font-weight: 600;
text-align: center;
margin-top: 60px;
background-color: honeydew;
}
这是因为您的液体容器的高度为100vh
,这意味着该部分的高度为屏幕高度的100%。您用此类包装了Home
组件,因此Home
组件的高度为100vh。尝试用同一容器包装两个成分Home
和About
。