twitter bootstrap - Cómo hacer que la fila estire la altura restante
twitter-bootstrap bootstrap-4 (1)
Bootstrap 4.1.0 tiene una clase de utilidad para
flex-grow
que es lo que necesita para que la fila llene la altura restante.
Puede agregar una clase personalizada de "relleno" para esto.
También debe asegurarse de que el contenedor tenga altura completa.
El nombre de la clase en Bootstrap 4.1 es
flex-grow-1
<style>
html,body{
height:100%;
}
.flex-fill {
flex:1;
}
</style>
<div class="container-fluid d-flex h-100 flex-column">
<!-- I want this container to stretch to the height of the parent -->
<div class="row">
<div class="col">
<h5>Header</h5>
</div>
</div>
<div class="row bg-light flex-fill d-flex justify-content-start">
<!-- I want this row height to filled the remaining height -->
<div class="col portlet-container portlet-dropzone">
<!-- if row is not the right to stretch the remaining height, this column also fine -->
Content
</div>
</div>
</div>
Estoy tratando de hacer que el
container-fluid
y que la segunda
row
estire hasta la altura restante, pero no pude encontrar una manera de hacerlo.
Intenté configurar
align-items/align-self
para que se
stretch
pero tampoco funcionó.
A continuación se muestra mi estructura de código:
<div class="container-fluid"> <!-- I want this container to stretch to the height of the parent -->
<div class="row">
<div class="col">
<h5>Header</h5>
</div>
</div>
<div class="row"> <!-- I want this row height to filled the remaining height -->
<widgets [widgets]="widgets" class="hing"></widgets>
<div class="col portlet-container portlet-dropzone"> <!-- if row is not the right to stretch the remaining height, this column also fine -->
<template row-host></template>
</div>
</div>
</div>
Estoy usando Bootstrap 4 A6 . ¿Podría alguien sugerirme cómo hacer que el contenedor y la fila estiren la altura restante?