.react-bootstrap 上的flex-grow-1 <Row> 未填充垂直空间

Question

我正在努力在 Bootstrap 4.6.0（使用react-bootstrap 1.5.2）中获取 .flex-grow-1 来让我的布局上的组件扩展以填充剩余的可用垂直空间。

"bootstrap": "^4.6",
"react-bootstrap": "1.5.2",

以下代码生成我正在尝试构建的屏幕布局的线框。

import React, { Component } from "react";
import { Col, Row } from "react-bootstrap";
import './SingleSignIn.scss'


class SignUpLayout extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    const { country } = this.state;
    return (
      <Row>
        <Col id="left-column" className="grid bg-warning" style={{height: "100vw"}}>
          <Row className="grid flex-nowrap">
            <Col className="grid">
              {/* left margin */}
            </Col>
            <Col className="grid" xs={6} sm={6} md={6} lg={6} xl={6}>
              <Row className="grid" style={{height: "80px"}}>
                Welcome To:
              </Row>
              <Row className="grid" style={{height: "125px"}}>
                logo goes here
              </Row>
            </Col>
            <Col className="grid">
              {/* right margin */}
            </Col>
          </Row>
          <Row id="body" className="grid bg-danger flex-grow-1 flex-nowrap">
            <Col className="grid">
              {/* body left margin */}
            </Col>
            <Col className="grid" xs={10} sm={10} md={8} lg={8} xl={8}>
              <Row className="grid" style={{height: "10%"}}>
                e-mail input
              </Row>
              <Row className="grid" style={{height: "10%"}}>
                company name input
              </Row>
              <Row className="grid" style={{height: "10%"}}>
                country input
              </Row>
              <Row className="grid" style={{height: "10%"}}>
                phone number
              </Row>
              <Row className="grid" style={{height: "10%"}}>
                get started button
              </Row>
            </Col>
            <Col className="grid">
              {/* body right margin */}
            </Col>
          </Row>
        </Col>
        <Col id="right-column" className="grid" style={{height: "100vw"}}>
          Right Column
        </Col>
      </Row>
    )
  }
}

export default SignUpLayout;

我的目的是让标识为 #body 的组件垂直增长以填充视口上剩余的可用垂直空间。我正在使用

.flex-grow-1

类尝试根据我在搜索中遇到的其他类似帖子来完成此任务，但它没有达到预期的效果。

从上面的代码中得到的线框布局如下：

提前感谢您的指点。

Answer 1

我遇到了类似的问题。我找到了使用 bootstrap 5.3.2 和 react-bootstrap 2.9.0 的解决方案。希望它能帮助某人。 :)

/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";
import { Container, Row, Col } from "react-bootstrap";

function App() {
  return (
    <Container fluid={true} className="min-vh-100 d-flex flex-column">
      <Row>
        <Col
          sm={3}
      
          css={css`
            background-color: red;
          `}
        >A</Col>
        <Col
          sm={6}
          css={css`
            background-color: green;
          `}
        >
          B
        </Col>
        <Col
          sm={3}
          css={css`
            background-color: blue;
          `}
        >C</Col>
      </Row>

      <Row className="flex-grow-1">
        <Col
          sm={3}
          css={css`
            background-color: pink;
          `}
        ></Col>
        <Col
          sm={6}
          css={css`
            background-color: yellow;
          `}
        ></Col>
        <Col
          sm={3}
          css={css`
            background-color: purple;
          `}
        ></Col>
      </Row>
      <Row>
        <Col
          sm={12}
          css={css`
            background-color: grey;
          `}
        >Footer</Col>
      </Row>
    </Container>
  );
}

export default App;

这是结果：