查看端口高度在引导程序中不起作用？

Question

我正在尝试将视口高度设置为这两列，但由于某些未知的原因，它不起作用，因为结果两列具有相同的高度，尽管它不应该如此。为了您的信息，我在这里使用 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;

这是结果： 结果

谁能帮我解决这个问题？

Answer 1

问题是.vh-50Bootstrap 没有定义其样式表- 继续查看它，搜索.vh-50，您的搜索将返回 0 个结果。.vh-100&.min-vh-100是样式表中定义的唯一关于视口高度的 CSS。因此，要解决此问题，只需.vh-50在自定义样式表中进行定义即可。

.vh-50 {
  height: 50vh;
}