时间戳

首页 > 解决方案 > 使用 h-25 让 Bootstrap 网格行保持高度

bootstrap-4 - 使用 h-25 让 Bootstrap 网格行保持高度

问题描述

我试图让引导程序在网格中显示我认为是每行固定高度的简单表格。

为此，我试图将 h-25 应用于每一行并将溢出自动应用于外部容器。我尝试了这些的各种组合，但我无法让它按照我想象的方式工作——或者根本无法对任何 h 值做出反应。我发现的所有例子都没有探讨这个具体案例，这表明我做错了什么，但我看不出我的做事方式或任何更直接的解决方案有什么奇怪的地方。

从文档看来，我应该能够在没有任何自定义 css 的情况下做到这一点：高度控制、溢出选项、文本中断、列和行都是内置的。

这是一个小提琴示例

并粘贴相同的代码

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

<div class="text-break overflow-auto">
  <div class="row h-25">
    <div class="col">
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </div>
    <div class="col">
      aaaaa
    </div>
    <div class="col">
      aaaaa
    </div>
    <div class="col">
      aaaaa
    </div>
  </div>
  <div class="row h-25">
    <div class="col">
      aaaaa
    </div>
    <div class="col">
      aaaaa
    </div>
    <div class="col">
      aaaaa
    </div>
    <div class="col">
      aaaaa
    </div>
  </div>
  <div class="row h-25">
    <div class="col">
      aaaaa
    </div>
    <div class="col">
      aaaaa
    </div>
    <div class="col">
      aaaaa
    </div>
    <div class="col">
      aaaaa
    </div>
  </div>
  <div class="row h-25">
    <div class="col">
      aaaaa
    </div>
    <div class="col">
      aaaaa
    </div>
    <div class="col">
      aaaaa
    </div>
    <div class="col">
      aaaaa
    </div>
  </div>
</div>

标签： bootstrap-4

解决方案

读这个

当使用百分比高度 ( height: 25%) 时，高度基于父容器的高度。父容器没有定义的高度，所以它基本上是什么的 25%？

如果您希望行是视口高度的 25%，您可以vh-100在容器上使用 (height: 100vh)。这将为容器提供定义的高度。

https://codeply.com/p/qx3yKkqROv

<div class="text-break vh-100">
    <div class="row h-25 overflow-auto">
        <div class="col"> aaaaa </div>
        <div class="col"> aaaaa </div>
        <div class="col"> aaaaa </div>
        <div class="col"> aaaaa </div>
    </div>
    ... (remaining rows)
</div>

推荐阅读