我必须创建一个布局,其中内容网格必须在完整的剩余页面上,但布局还有一个导航栏. 为了做到这一点,我决定将导航栏放在flex容器中,并将内容放在高度为100%的行中.我需要内容来填补
为了做到这一点,我决定将导航栏放在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
(Updated Bootstrap 4.1 demo)
相关问题:Bootstrap 4: How to make the row stretch remaining height?