视口高度在引导程序中不起作用？答案

【问题标题】：View port height is not working in bootstrap?视口高度在引导程序中不起作用？
【发布时间】：2021-01-18 16:57:18
【问题描述】：

我正在尝试将视口高度设置为这两列，但由于某些未知原因，它无法正常工作，结果两列具有相同的高度，但不应该如此。为了您的信息，我在这里使用 React-bootstrap。不知道是我的错还是什么？无论如何，这是供您参考的代码：

import React from "react;
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col"

const AdminPanel = () => {
  const users = [{ name: "Talha" }, { name: "Ali" }];
  return (
    <Container className="pt-5">
      <Row className="d-flex justify-content-around">
        <Col className="vh-50 border border-primary col mx-5">
          {users.map((user) => (
            <Row className="py-2 px-2">{user.name}</Row>
          ))}
        </Col>
        <Col className="border border-primary mx-5">
          <h1>
            list list list list list list list list list list list list list
          </h1>
        </Col>
      </Row>
    </Container>
  );
};

export default AdminPanel;

结果如下： Result

谁能帮我解决这个问题？

【问题讨论】：

标签： css reactjs jsx react-bootstrap

【解决方案1】：

问题是 .vh-50 不是 Bootstrap 定义的 their stylesheet - 继续查看它，搜索 .vh-50 并且您的搜索将返回 0 个结果。 .vh-100 & .min-vh-100 是唯一在其样式表上定义的关于视口高度的 CSS。所以要解决这个问题，只需在自定义样式表中定义 .vh-50。

.vh-50 {
  height: 50vh;
}

【讨论】：

谢谢。我试试看