视图端口高度在引导中不起作用吗？

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;

​

下面是结果：Result

有人能帮我解决这个问题吗？

Answer 1

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

.vh-50 {
  height: 50vh;
}