Question

我有以下html正文：

<body>
    <div class="container-fluid h-100 border">
        <div class="row h-50">
            <div class="col-sm-12 bg-danger">Row1</div>
        </div>
        <div class="row h-50">
            <div class="col-sm-12 bg-primary">Row2</div>
        </div>
    </div>
</body>

我想更改2行的高度，但始终让它们都填充容器。因为它们都是占据屏幕的一半。但是，如果我将高度更改为20和80，则行仅恢复为屏幕顶部的2个小行。唯一起作用的其他高度是100和100，它仅使2个全屏显示的行都不是我想要的。

任何想法？

Answer 1

使用`flex-grow-1`

在div.container-fluid

上使用这些类别

d-flex-使它弯曲
flex-column-将其方向更改为列
h-100-将其高度设置为100％。

如果您希望两个rows均等地填充容器，请在每个flex-grow-1上使用body, html { height: 100%; }。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container h-100 d-flex flex-column">
  <div class="row flex-grow-1 bg-danger"></div>
  <div class="row flex-grow-1 bg-primary"></div>
</div>

flex-grow-1

行填充了50％的容器

否则，对其中一个使用body, html { height: 100%; }，并控制第二个。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container h-100 d-flex flex-column">
  <div class="row h-25 bg-danger"></div>
  <div class="row flex-grow-1 bg-primary"></div>
</div>

100%

第一行填充了25％的容器，第二行填充了剩余的可用空间。

容器的所有父级都必须具有export type BreadcrumbItemProps = { isCurrent?: boolean; }; export const Item = styled.span<BreadcrumbItemProps>` display: inline; padding: 10px; cursor: default; font-weight: ${ props.isCurrent ? 'normal' : 'bold'}; `;的高度。

Answer 2

首先，您必须将html和body设置为100％的高度。

然后，您可以根据需要使用预定义的引导程序类，例如h-50或h-75来填充容器-就像{{3} }

但是，如果您想要特定的高度，则可以简单地创建自定义类，如下所示：

h-80

让我知道这是否对您有帮助。

在Bootstrap中更改行的高度

2 个答案:

使用`flex-grow-1`

在Bootstrap中更改行的高度

2 个答案:

使用flex-grow-1

使用`flex-grow-1`