Bootstrap 4导航栏和内容填充高度flexbox [英] Bootstrap 4 Navbar and content fill height flexbox

问题描述

我必须创建一个布局，其中内容网格必须位于剩余的整个页面上，但是该布局还具有导航栏.

为此，我决定将导航栏放置在flex容器中，并将内容放置在高度为100％的行中.我需要内容来填充剩余的剩余空间.菜单是动态的，所以我不知道导航栏的高度.

但是，在较小的屏幕上，导航栏无法正确调整大小.如果展开菜单，则菜单将覆盖内容.

<div class="container-fluid h-100 d-flex flex-column">

  <nav class="navbar navbar-expand-sm s-navbar">
     ...
  </nav>
  <div class="row h-100">
     ...// content presented here
  </div>
</div>

您可以在这里看到它 https://jsfiddle.net/ej9fd368/8/因为最后一个菜单项被剪切，黄色内容.

我的要求是内容应填充页面的其余部分.

解决方案

而不是在黄色内容区域中使用h-100，而是添加一个额外的CSS类以使其高度可弯曲:1 ...

.flex-fill {
  flex:1 1 auto;
}

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

<div class="container-fluid h-100 d-flex flex-column">
    <nav class="navbar navbar-expand-sm s-navbar">
        <a class="brand navbar-brand" href="/">Brand</a>
        <button class="navbar-toggler s-btn-hamburger order-first s-color-icons" aria-expanded="true" aria-controls="navbar-test" aria-label="Toggle navigation" type="button" data-target="#navbar-test" data-toggle="collapse">
            <span class="navbar-toggler-icon k-icon k-icon-md k-i-hamburger"></span>
        </button>
        <div class="navbar-collapse s-menu-content collapse show" id="navbar-test">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" id="dropdown1" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown">Menu Item</a>
                    <div class="dropdown-menu" aria-labelledby="dropdown1">
                        <a class="dropdown-item" href="/Device">Sub menu</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/Test">Test</a>
                </li>
            </ul>
        </div>
    </nav>
    <div class="row flex-fill">
        <main class="col" style="background-color: yellow"></main>
    </div>
</div>

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

( ="已更新 Bootstrap 4.1 演示)

---

相关问题:引导程序4:如何制作行拉伸剩余高度?

I have to create a layout in which a content grid has to be on the full remaining page, but the layout has also a navigation bar.

In order to do this I decided to place the navigation bar in a flex container and the content in a row with height 100%. I need the content to fill the rest of the remaining space. The menu is dynamic so I can not know how the height of the navigation bar is.

However on smaller screens the navigation bar does not resize correctly. If the menu is expanded the menu is overlayed with the content.

<div class="container-fluid h-100 d-flex flex-column">

  <nav class="navbar navbar-expand-sm s-navbar">
     ...
  </nav>
  <div class="row h-100">
     ...// content presented here
  </div>
</div>

You can see it here https://jsfiddle.net/ej9fd368/8/ that the last menu item is cut because of the yellow content.

My requirement is that the content should fill the rest of the page.

解决方案

Instead of using h-100 on the yellow content area, add an extra CSS class to make it flex-grow:1 in height...

.flex-fill {
  flex:1 1 auto;
}

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

<div class="container-fluid h-100 d-flex flex-column">
    <nav class="navbar navbar-expand-sm s-navbar">
        <a class="brand navbar-brand" href="/">Brand</a>
        <button class="navbar-toggler s-btn-hamburger order-first s-color-icons" aria-expanded="true" aria-controls="navbar-test" aria-label="Toggle navigation" type="button" data-target="#navbar-test" data-toggle="collapse">
            <span class="navbar-toggler-icon k-icon k-icon-md k-i-hamburger"></span>
        </button>
        <div class="navbar-collapse s-menu-content collapse show" id="navbar-test">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" id="dropdown1" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown">Menu Item</a>
                    <div class="dropdown-menu" aria-labelledby="dropdown1">
                        <a class="dropdown-item" href="/Device">Sub menu</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/Test">Test</a>
                </li>
            </ul>
        </div>
    </nav>
    <div class="row flex-fill">
        <main class="col" style="background-color: yellow"></main>
    </div>
</div>

Note: The flex-fill utility class will be included in the next Bootstrap 4.1 release: https://github.com/twbs/bootstrap/commit/2137d61eacbd962ea41e16a492da8b1d1597d3d9

(Updated Bootstrap 4.1 demo)

---

Related question: Bootstrap 4: How to make the row stretch remaining height?

这篇关于Bootstrap 4导航栏和内容填充高度flexbox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！