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

问题描述

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

为了做到这一点，我决定将导航栏放在一个 flex 容器中，并将内容排成一行，高度为 100%.我需要内容来填充其余的剩余空间.菜单是动态的，所以我不知道导航栏的高度是多少.

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

<nav class="navbar navbar-expand-sm s-navbar">...</nav><div class="row h-100">...//这里呈现的内容

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

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

解决方案

不要在黄色内容区域使用 h-100，而是添加一个额外的 CSS 类，使其成为 flex-grow:1身高...

.flex-fill {弹性:1 1 自动；}

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

<nav class="navbar navbar-expand-sm s-navbar"><a class="brand navbar-brand" href="/">品牌</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="按钮" data-target="#navbar-test" data-toggle="collapse"><span class="navbar-toggler-icon k-icon k-icon-md k-i-hamburger"></span><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">菜单项</a><div class="下拉菜单" aria-labelledby="dropdown1"><a class="dropdown-item" href="/Device">子菜单</a>
<li class="nav-item"><a class="nav-link" href="/Test">Test</a>

</nav><div class="row flex-fill"><main class="col" style="background-color: yellow"></main>

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

(更新了 Bootstrap 4.1 演示)

<小时>

相关问题:Bootstrap 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 Navbar 和内容填充高度 flexbox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！