Question

我尝试使用Bootstrap创建布局，但是无法更改行的高度。例如，我希望第一行高度为25％，第二行为50％，最后一行为25％。我该怎么办？

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row h-25">
    <div class="col-12">
      <h1>test</h1>
    </div>
  </div>
  <div class="row h-50">
    <div class="col-4"></div>
    <div class="col-8"></div>
  </div>
  <div class="row h-25">
    <div class="col-10"></div>
    <div class="col-2"></div>
  </div>
</div>

Answer 1

您需要为height: 100%;，html和body指定container-fluid

html, body {
  height: 100%;
}

.row {
  border: thin solid black;
}

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

<div class="container-fluid h-100">
  <div class="row h-25">
    <div class="col-12">
      <h1>test</h1>
    </div>
  </div>
  <div class="row h-50">
    <div class="col-4">height</div>
    <div class="col-8">50</div>
  </div>
  <div class="row h-25">
    <div class="col-10">height</div>
    <div class="col-2">25</div>
  </div>
</div>

Answer 2

重要的是，您的div必须包裹在其他具有确定高度的东西内。否则，这些百分比就没有意义了-到底是百分之二十五？

演示：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<div style="height: 100px;">
  <div class="h-25" style="background-color: yellow">Height 25%</div>
  <div class="h-50" style="background-color: red">Height 50%</div>
  <div class="h-25" style="background-color: green">Height 25%</div>
</div>

另请参阅https://getbootstrap.com/docs/4.0/utilities/sizing/

如何在Bootstrap中设置表格行高？

2 个答案: