Bootstrap 4: Comment faire pour que la rangée étire la hauteur restante?
j'essaie de faire le container-fluid et le 2 row pour s'étirer jusqu'à la hauteur restante mais je n'ai pas pu trouver un moyen de le faire.
j'ai essayé de mettre le align-items/align-self à stretch mais ça n'a pas marché non plus.
ci-dessous est ma structure de code:
<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>
j'utilise Bootstrap 4 A6 . Est-ce que quelqu'un pourrait me suggérer comment faire le conteneur et la rangée pour étirer la hauteur restante?
1 réponses
Bootstrap 4.1.0 a une classe d'utilité pour flex-grow qui il ce que vous avez besoin pour la ligne pour remplir la hauteur restante. Vous pouvez ajouter une classe "fill" personnalisée pour cela. Vous devez également vous assurer que le conteneur est pleine hauteur.
le nom de classe dans Bootstrap 4.1 est flex-grow-1
html,body{
height:100%;
}
.flex-fill {
flex:1;
}
<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>
https://www.codeply.com/go/kIivt8N1rn