html – Bootstrap 4使用flex-grow制作嵌套行填充父级,以填充视口高度

目前,我有一个(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>

更新
使用@Zimsystem代码时发生以下错误.我该怎么解决这个问题？

解决方法

我想你只需要记住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

原文地址：https://www.jb51.cc/html/231484.html