css - 使用 react-bootstrap 在一定高度后切断内容
问题描述
我无法让我的 react 应用程序响应,我正在使用 React-Bootstrap 创建我的投资组合,但我遇到了一个问题,我让网站在纵向模式下看起来不错。但是当谈到使网站看起来不错的风景时,它看起来不那么热,内容在一定的视口高度被切断。无论视口高度如何,我都希望内容可以滚动,但不允许我这样做。
我正在使用 React-bootstrap 来布置这个页面,我是 React 的新手,但我有一些使用 bootstrap 的经验,所以使用 react-bootstrap 有点困难
这是我的CSS
@import url('https://fonts.googleapis.com/css?family=Roboto');
.wrapper-3 {
position:relative ;
top: 20%;
height: 100vh;
}
.Contact {
color: white;
font-family: Roboto;
font-size: 3em;
}
.Email {
color: white;
font-size: 1.7em;
}
.underline-contact {
border: 2px solid white;
border-radius: 6px;
width: 10em;
}
@media screen and (max-width: 690px) {
#contact-icons {
margin-right: 3%;
}
}
@media screen and (max-height: 429px) {
.wrapper-3 {
margin-top: 20em;
}
}
@media screen and (max-width: 444px) {
#contact-icons {
margin-right: 2%;
}
.contact-icon {
font-size: 3em;
}
}
@media screen and (max-width: 382px) {
.Email {
font-size: 1.6em;
}
}
@media screen and (max-width: 372px) {
.contact-icon {
font-size: 2.5em;
}
}
@media screen and (max-width: 367px) {
.Email {
font-size: 1.4em;
}
}
@media screen and (max-height: 391px) {
.contact-row {
position: relative;
top: 5em;
}
}
@media screen and (max-height: 369px) {
.wrapper-3 {
top: 10em;
}
}
@media screen and (max-height: 361px) {
.wrapper-3 {
top: 11em;
}
}
这是我的 jsx
import React from 'react';
import { Container, Col, Row } from 'react-bootstrap';
import './Contact.css';
import { library } from '@fortawesome/fontawesome-svg-core';
import { fab } from '@fortawesome/free-brands-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
library.add(fab)
class Contact extends React.Component {
render() {
return (
<div>
<Container className="content" fluid>
<div className="wrapper-3">
<div className="contact-row">
<Row className="justify-content-center">
<Col xs="auto">
<h1 className="Contact">Contact</h1>
<hr className="underline-contact"></hr>
</Col>
</Row>
<Row className="mt-3 justify-content-center">
<Col xs="auto">
<h3 className="Email">harrisonjones5678@gmail.com</h3>
</Col>
</Row>
<Row
className="justify-content-center ml-5 mt-5"
id="contact-icons">
<Col xs="auto">
<FontAwesomeIcon className="icon one contact-icon"
icon={['fab', 'git']}
size="6x"
style={{color: '#FFFFFF'}} />
</Col>
<Col xs="auto">
<FontAwesomeIcon className="icon two contact-icon"
icon={['fab', 'linkedin']}
size="6x"
style={{color: '#FFFFFF'}} />
</Col>
<Col xs="auto">
<FontAwesomeIcon className="icon three contact-icon"
icon={['fab', 'instagram']}
size="6x"
style={{color: '#FFFFFF'}} />
</Col>
</Row>
</div>
</div>
</Container>
</div>
)
}
}
export default Contact;
解决方案
内容太短而无法滚动。您可以添加padding-bottom
和margin-bottom
,.contact-row
以便可以在内容下方添加空间并使其可滚动。
推荐阅读
- vb.net - 引用同一行中已计算数据表列中的最小值的另一个单元格
- google-apps-script - 当我复制包含 web 应用程序的工作表时,网络应用程序可以自动更新吗
- ffmpeg - ffmpeg 无法打开连接 tcp://a.rtmp.youtube.com
- javascript - 使用纯 JavaScript 单击元素时添加/删除类
- angular - 当页面方向更改为“RTL”时,侧边栏未正确呈现
- vba - 在 ASCII 中拆分字符串
- python - 如何在 Discord 中获取给定用户名的任何用户的 ID?
- html - GitHub页面中的图像问题,但它在本地工作
- c# - 如何在构建过程中将引用的dll集成到exe中?
- spring - Spring WebClient Post 正文未通过