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

Question

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

我确实尝试过仅对height和maxHeight使用%，但显然它不起作用。我认为pxs是没有意义的，因为它会以不同的分辨率显示在屏幕上，所以我担心它会搞砸。我确实下载了MDBreact并使用了‘className=“h-25d-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>

​