React bootstrap 列在 ipad 和 ipad pro 上留下白色 space

Question

我正在用 react-bootstrap 和 Ipad 和 Ipad pro 建立一个网站，在我的专栏底部留下一个白色的 space。我已附上屏幕截图以显示问题。当我进入 Ipad 模式时，我不确定是什么导致底部出现白色 space。所有其他设备都很好。这是我的组件 CSS:

  return (
    <Container fluid  className="about-us">
      <Row className="row row-about">
            <Col lg={6} className="text">
            <h1>WE ARE TECHON</h1>
            <h2>What we do</h2>
            <p>
              By providing user-focused digital solutions
              that intersect technology and innovation,
              we assisit start-ups and SMME's to have 
              the edge and take full advantage of the 
              digital age. Solving problems is our philosophy;
              motivationg us to use technology as a 
              tool to innovate and improve lives.
            </p>
            <h2>Why we do it</h2>
            <p>
             "Lorem ipsum dolor sit amet, consectetur adipiscing elit,
             sed do eiusmod tempor incididunt ut labore et dolore magna
             aliqua. Ut enim ad minim veniam, quis nostrud exercitation
             ullamco laboris nisi ut aliquip ex ea commodo consequat.
             Duis aute irure dolor in reprehenderit in voluptate velit.
            </p>
        </Col>
        <Col lg={6} className="image">
            <Image className="about-img" src={require('../techOn.png')} style={{height:"100%", width: "100%"}} />
            </Col>
      </Row>
    </Container>
  );
}


.custom-nav {
  background-color: #11212b;
}
.custom-link {
  font-size: 20px;
  color: #12ffef !important;
  margin-left: 30px;
  text-decoration: none;
  text-align: right !important;
}
@media only screen and (max-width: 568px) {
  .custom-link {
    font-size: 15px;
    margin-left: 15px;
  }

  .nav {
    width: 110%;
  }
  .row {
    display: flex;
    flex-direction: column-reverse;
 }
 .story, .image {
    margin-top: 0;
    padding-top: 0;
 }
 .text {
    margin-left: 5px !important;
    font-size: 15px;
    text-align: left !important;
    margin-top: 0;
    padding-top: 0;
 }

}
.text {
  background-image: url("./techOn.png");
  color: rgb(195, 255, 249);
  margin: 20px 0px 0px 10px;
  text-align: justify;

}

.row-about {
    background-image: url("./techOn.png");
}

.row {
    display: flex;
}

@media only screen  and (min-width: 1024px) and (max-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) 
  and (orientation: portrait) {
       .custom-link {
    font-size: 15px;
    margin-left: 15px;
  }

  .nav {
    width: 100%;
  }
  .row {
    display: flex;
    flex-direction: column-reverse;
 }
  }

Answer 1

您没有将背景样式应用于 class "about-us" 有什么原因吗？可能会修复它

您也可以在 row-about

上使用 height=100vh

React bootstrap 列在 ipad 和 ipad pro 上留下白色 space

React bootstrap columns leaving white space on ipad and ipad pro

react-bootstrap

bootstrap-grid