目前,我有一个(class =“d-flex flex-column”)包含一个导航栏和一个容器,这个容器包含一个(class =“d-flex flex-column”),它包含两行.我使用flex-grow使我的容器填满页面.我希望在这个嵌套容器中创建第二行,以便再次使用flex-grow填充其父级,但它不起作用.如何使嵌套元素增长以填充在Bootstrap v4中使用flex-grow填充视口高度的父级？
我不应该将flex和容器结合起来做我想要的吗？如果是这样,我该怎么做？
当我执行以下操作时,当容器展开以填充高度时,容器内的行只保持相同的高度,因此不会相应地扩展.
<div class="d-md-flex flex-column h-100">
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<button class="btn btn-outline-warning mr-auto" type="submit">Back</button>
<button class="btn btn-outline-success" type="submit">logout</button>
</nav>
<div class="container-fluid flex-grow">
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
<div class="btn-toolbar justify-content-between" id="label-toolbar">
<div class="btn-group">
<select class="form-control form-control-sm" id="label-option">
<option>Main</option>
<option>Unknown</option>
</select>
<button type="button" class="btn btn-outline-primary btn-sm" id="create-button">Create</button>
<button type="button" class="btn btn-outline-primary btn-sm" id="delete-button">Delete</button>
<button type="button" class="btn btn-outline-primary btn-sm" id="edit-button">Edit</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-success btn-sm" id="prevIoUs-button">PrevIoUs</button>
<button type="button" class="btn btn-outline-success btn-sm" id="next-button">Next</button>
</div>
</div>
<div id="draw-area"></div>
</div>
</div>
</div>
<div class="col-md-3 label-sidebar"></div>
</div>
</div>
</div>
解决方法
我想你只需要记住flex-grow适用于display：flex的子节点,而不是父节点.因此,如果父亲也是一个孩子,flex-grow将起作用.
.flex-fill {
flex: 1 1 auto;
}
在您的情况下,< div class =“container-fluid flex-fill”>< / div>也应该是d-flex,这样你就可以使用flex-grow让它的孩子长高,然后继续向下到绘图区域.
https://www.codeply.com/go/gT3jsg43Lv
<div class="d-md-flex flex-column h-100">
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<button class="btn btn-outline-warning mr-auto" type="submit">Back</button>
<button class="btn btn-outline-success" type="submit">logout</button>
</nav>
<div class="container-fluid d-flex h-100">
<div class="row flex-grow">
<div class="col-md-9">
<div class="row h-100">
<div class="col-md-12 d-flex flex-column flex-grow">
<div class="btn-toolbar justify-content-between" id="label-toolbar">
<div class="btn-group">
<select class="form-control form-control-sm" id="label-option">
<option>Main</option>
<option>Unknown</option>
</select>
<button type="button" class="btn btn-outline-primary btn-sm" id="create-button">Create</button>
<button type="button" class="btn btn-outline-primary btn-sm" id="delete-button">Delete</button>
<button type="button" class="btn btn-outline-primary btn-sm" id="edit-button">Edit</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-success btn-sm" id="prevIoUs-button">PrevIoUs</button>
<button type="button" class="btn btn-outline-success btn-sm" id="next-button">Next</button>
</div>
</div>
<div id="draw-area" class="flex-grow bg-warning"> draw area </div>
</div>
</div>
</div>
<div class="col-md-3 label-sidebar"></div>
</div>
</div>
</div>
注意：flex-fill实用程序类将包含在下一个Bootstrap 4.1发行版中：https://github.com/twbs/bootstrap/commit/2137d61eacbd962ea41e16a492da8b1d1597d3d9
有关
Bootstrap 4.0 – responsive header with image + navbar + full-height body
