reactjs - 如何在 React-Bootstrap/MDBReact 中使用 % 设置行/列的高度？

Question

所以基本上我在使用 React-Bootstrap 中的 % 设置行/列的高度时遇到了一点问题。我有一个包含 8 列的行(我要在此处添加一些按钮、图标、图像和文本字段)，所有这些都必须具有相同的高度。

我确实尝试过将 % 与 height 和 maxHeight 一起使用，但显然没有成功。我认为 pxs 毫无意义，因为它会显示在不同分辨率的屏幕上，所以我担心它会搞砸。我确实下载了 MDBreact 并使用了 'className="h-25 d-inline-block"' 但它也没有用。

     <Container md={12} style={{backgroundColor: "red", margin:"0px", maxWidth: "100%", maxHeight: "85%", height: "85%"}}>

           <Row>
           <Col className="h-25 d-inline-block" style={{backgroundColor: "yellow"}}>Machine 11</Col>
            <Col style={{backgroundColor: "pink"}}> Machine 21</Col>
            <Col style={{backgroundColor: "blue"}}> Machine 31</Col>
            <Col style={{backgroundColor: "purple"}}> Machine 41</Col>
            <Col style={{backgroundColor: "gray"}}> Machine 51</Col>
            <Col style={{backgroundColor: "red"}}> Machine 61</Col>
            <Col style={{backgroundColor: "pink"}}> Machine 71</Col>
            <Col style={{backgroundColor: "magenta"}}> Machine 81</Col>
                </Row>


    </Container>

我确实期望列的高度设置为 20/25%(将会有 3 行 + 导航栏已经制作完成)但我实际上什么也没得到，除了我用像素来做，但它没有捕获要点。

Answer 1

您将容器的高度设置为 85%，因此其父容器必须具有特定高度。如果容器的父级没有特定高度，则必须设置容器高度。

您还需要将每行的高度设置为“h-25”。

这里有一个使用 HTML 的例子(在 react 中效果是一样的)

/* styling just to show element dimensions */
.container {
  border: 1px dashed green;
  margin-top: 8px;
}
.col {
  border: 1px solid #ccc;
  background-color: #e0e0e0;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<!-- same as <Container style={{height: 200px}}> -->
<div class="container" style="height: 200px">

  <!-- same as <Row className="h-25"> -->
  <div class="row h-25">
    <div class="col">row1-col-1</div>
    <div class="col">row1-col-2</div>
    <div class="col">row1-col-3</div>
  </div>

  <div class="row h-25">
    <div class="col">row2-col-1</div>
    <div class="col">row2-col-2</div>
    <div class="col">row2-col-3</div>
  </div>

  <div class="row h-25">
    <div class="col">row2-col-1</div>
    <div class="col">row2-col-2</div>
    <div class="col">row2-col-3</div>
  </div>
</div>