Bootstrap 4 导航栏和内容填充高度 flexbox
Posted
技术标签:
【中文标题】Bootstrap 4 导航栏和内容填充高度 flexbox【英文标题】:Bootstrap 4 Navbar and content fill height flexbox 【发布时间】:2018-08-17 22:03:09 【问题描述】:我必须创建一个布局,其中内容网格必须位于整个剩余页面上,但该布局还有一个导航栏。
为了做到这一点,我决定将导航栏放在一个 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/最后一个菜单项因为黄色内容被删掉了。
我的要求是内容应该填满页面的其余部分。
【问题讨论】:
"菜单是动态的,所以我不知道导航栏的高度是多少。" -- 导航栏的高度总是相同的56px。您只需将导航栏 out 从您的容器中取出。问题解决了。 【参考方案1】:不要在黄色内容区域使用h-100
,而是添加一个额外的 CSS 类以使其高度为 flex-grow: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
(Updated Bootstrap 4.1 demo)
相关问题:Bootstrap 4: How to make the row stretch remaining height?
【讨论】:
Zim 在此处对 Bootstrap 4 的正确和干净的答案:***.com/questions/15641142/…以上是关于Bootstrap 4 导航栏和内容填充高度 flexbox的主要内容,如果未能解决你的问题,请参考以下文章
导航栏和粘性 Bootstrap 页脚之间的 100% 高度