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