时间戳

首页 > 解决方案 > 如何在 React-Bootstrap/MDBReact 中使用 % 设置行/列的高度？

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

问题描述

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

我确实尝试只使用 % 和 height 和 maxHeight 但显然它没有成功。我认为 px 毫无意义，因为它会显示在不同分辨率的屏幕上，所以我担心它会搞砸。我确实下载了 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 行 + 导航栏），但除了我用像素做它之外，我几乎什么也没得到，但它没有抓住重点。

标签： reactjsreact-bootstrapmdbreact

解决方案

您将容器的高度设置为 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>

推荐阅读