Question

目前，我有一个包含导航栏和容器的（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代码时发生以下错误。我该怎么解决这个问题？

Answer 1

我认为你只需要记住，flex-grow适用于.flex-fill { flex: 1 1 auto; }的孩子，而不是父母。因此，如果父亲也是一个孩子，flex-grow将起作用。

<div class="container-fluid flex-fill"></div>

在您的情况下，d-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 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-grow让孩子的身高增长，然后将其继续向下绘制区域。

https://www.codeply.com/go/gT3jsg43Lv

eval

<小时/> 注意：flex-fill实用程序类将包含在下一个Bootstrap 4.1版本中：https://github.com/twbs/bootstrap/commit/2137d61eacbd962ea41e16a492da8b1d1597d3d9

相关
Bootstrap 4.0 - responsive header with image + navbar + full-height body
Bootstrap 4: How to make the row stretch remaining height?

Bootstrap 4使用flex-grow进行嵌套行填充父级，以填充视口高度

1 个答案: