时间戳

首页 > 解决方案 > 如何在 Bootstrap 中设置表格行高？

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

问题描述

我尝试使用 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>

标签： htmljquerycss

解决方案

您需要指定height: 100%;forhtml和bodycontainer-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>

推荐阅读