Question

我在使我的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;

Answer 1

内容太短而无法滚动。您可以在“ .contact-row”中添加“ padding-bottom”和“ margin-bottom”，以便可以在内容下方添加空间并使它可滚动。

使用react-bootstrap在一定高度后切断内容

1 个答案: