使用react引导在一定高度后切断内容

Question

我有困难使我的反应应用程序响应，我使用反应-引导创建我的投资组合，但我遇到了一个问题，我使网站看起来很好的肖像模式。但是当要让网站看起来很好的时候--它看起来不那么热--内容会在一定的视口高度被切断。我希望内容是可滚动的，无论视口高度，但它不允许我这样做。

我正在使用new引导来展示这个页面，并且我是新手，但是我有一些使用引导的经验，所以使用回滚引导有点困难。

这是我的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;

Answer 1

内容太短，无法滚动。您可以将padding-bottom和margin-bottom添加到.contact-row中，这样就可以在内容下面添加空间并使其可滚动。